Use jQuery to implement pseudo-Paging, and use jquery to share pseudo-pagination

Use jQuery to implement pseudo-Paging, and use jquery to share pseudo-pagination

This example describes how jQuery implements pseudo-paging. We will share this with you for your reference. The details are as follows:

Table data can be pseudo-paged, and can be implemented only by executing simple code.

The implementation is very simple, and the style is not very nice. You can adjust and correct it on your own.

The following is a table where the tr data is loaded in the tbody, no matter how you load the data,

After the data is loaded, the table data can be pseudo-paged. Note that the class referenced by div is filled with four columns of data. Therefore, colspan is added to td, and div is the display area by page.

<table>   <tbody id="dialog-items">    </tbody>    <tfoot>      <tr>       <td colspan="4">        <div id="maskPage" class="page_btn">        </div>       </td>    </tr>   </tfoot></table>

The following are the css and js methods.

.page_btn{padding-top:0px;}.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}.page_box{float:right;}.num{padding:0 10px;}

The js method is as follows:

// False pagiNation of tbody; pageDiv: div tbodyId used to display paging data: ID of tbody, pageSize, number of pages function pagiNation (pageDiv, tbodyId, pageSize) {$ ("#" + tbodyId + "tr: gt (" + (pageSize-1) + ")"). hide (); // initialization, front pageSize-1 bar data display, other data hidden. Var total_q = $ ("#" + tbodyId + "tr "). length; // total data var current_page = pageSize; // The data displayed on each page var current_num = 1; // the current page var total_page = Math. ceil (parseFloat (total_q)/parseFloat (current_page )); // total number of pages var pagePlugIn = "<span class = \" page_box \ ">" + "<a id = \" "+ tbodyId +" _ prev \ "class = \" prev \ "> previous page </a>" + "<span id = \" "+ tbodyId +" _ num \ "class = \" num \ ">" + "<span id = \ "" + tbodyId + "_ current_page \" class = \ "current_page \"> 1 </span> "+" <span style = \ "padding: 0 3px; \ ">/</span>" + "<span id = \" "+ tbodyId +" _ total \ "class = \" total \ "> </span> </ span> "+" <a id = \ "" + tbodyId + "_ next \" class = \ "next \"> next page </a> "+" </span> "; $ ("#" + pageDiv + "" ).html (pagePlugIn); var next = $ ("#" + tbodyId + "_ next "); // next page var prev = $ ("#" + tbodyId + "_ prev"); // Previous Page $ ("#" + tbodyId + "_ total "). text (""); // display the total number of pages $ ("#" + tbodyId + "_ total "). text (total_page); // display the total number of pages $ ("#" + tbodyId + "_ current_page "). text (""); // the current page number $ ("#" + tbodyId + "_ current_page "). text (current_num); // current page number/next page $ ("#" + tbodyId + "_ next "). unbind ("click"); $ ("#" + tbodyId + "_ next "). click (function () {if (current_num = total_page) {return false; // if the number of pages exceeds the total number of pages, disable the next page} else {$ ("#" + tbodyId + "_ current_page "). text (++ current_num); // when you click the next page, the value of the current page is added to 1 $. each ($ ("#" + tbodyId + "tr"), function (index, item) {var start = current_page * (current_num-1 ); // start range: var end = current_page * current_num; // end range: if (index> = start & index <end) {// if the index value is an element between start and end, it is displayed; otherwise, $ (this) is hidden ). show ();} else {$ (this ). hide () ;}}) ;}}); // method of the previous page $ ("#" + tbodyId + "_ prev "). unbind ("click"); $ ("#" + tbodyId + "_ prev "). click (function () {if (current_num = 1) {return false;} else {$ ("#" + tbodyId + "_ current_page "). text (-- current_num); $. each ($ ("#" + tbodyId + "tr"), function (index, item) {var start = current_page * (current_num-1 ); // start range: var end = current_page * current_num; // end range: if (index> = start & index <end) {// if the index value is an element between start and end, it is displayed; otherwise, $ (this) is hidden ). show ();} else {$ (this ). hide () ;}}) ;}} $ ("#" + pageDiv + ""). show ();}

The page references css and js. After loading the data,

Function fillTabl (){...................... data filling ....................................... pagiNation ('maskpage', 'Dialog-items ', 10); // id of the input div, id of the tbody, and number of pages}

The effect is as follows: