How jQuery implements pseudo-Paging _ jquery

This article mainly introduces jQuery's method of Implementing Pseudo-Paging, and analyzes the specific steps and related implementation code of jQuery in the form of examples, for more information about jQuery's pseudo-Paging implementation, see the examples in this article. 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 p is filled with four columns of data. Therefore, colspan is added to td, and p is the display area by page.

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: p 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 page number var pagePlugIn = "" + "Previous Page" + "" + "1" + "/" + "" + "next page" + ""; $ ("#" + 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); // the id of the input p, the id of the tbody, and the number of pages}

The effect is as follows: