JQuery paging plug-in and jQuery paging plug-in

JQuery paging plug-in and jQuery paging plug-in

The source code is as follows:

[Javascript]View plaincopyprint?

1. $. Fn. pager = function (pagerInfo ){
2. Var recordCount = this. size ();
3. If (recordCount <= pagerInfo. pagesize) return;
4. Var currentPageIndex = 1, // The current surface. The default value is 1.
5. PageCount = Math. ceil (recordCount/pagerInfo. pagesize); // total number of pages
6. // Construct the html of the page
7. $ ('<Div> total' + this. size () + 'records, total '+ pageCount +' page, current <span> 1 </span> page </div> ')
8. . InsertAfter (pagerInfo. container)
9. . Append ($ ('<a class = "prev-page"> previous page </a>'). click (function (){
10. If (currentPageIndex = 1) return;
11. CurrentPageIndex --;
12. ShowRecords (currentPageIndex );
13. $ (This). prev ('span '). text (currentPageIndex );
14. }))
15. . Append ($ ('<a class = "prev-page" href> next page </a>'). click (function (){
16. If (currentPageIndex = pageCount) return;
17. CurrentPageIndex ++;
18. ShowRecords (currentPageIndex );
19. $ (This). prevAll ('span '). text (currentPageIndex );
20. }))
21. .Css(pagerInfo.css)
22. .Find('span'apps.css ({padding: 0 });
24. Var jRecords = this; // reserved Scope
25. // PageIndex starts with 1
26. Var showRecords = function (pageIndex ){
27. JRecords. hide (); // hide all records first
28. Var startIndex = (pageIndex-1) * pagerInfo. pagesize, // start record of the current page
29. EndIndex = (pageIndex * pagerInfo. pagesize)-1; // end record of the current page
30. JRecords. filter (': eq (' + startIndex + '),: gt (' + startIndex + ')'). show (); // display all records greater than the start record (inclusive)
31. JRecords. filter (': gt (' + endIndex + '). hide (); // hide all records greater than the end record to achieve paging Effect
32. };
34. ShowRecords (currentPageIndex );
35. };

 

Example:

 

[Javascript]View plaincopyprint?

1. $ ('# Feedback ul li') // Data Source
2. . Pager ({
3. Pagesize: 10, // page size
4. Container: $ ('# feedback'), // container that contains html pages
5. Css: {'margin-left': '40px '} // pagination html Style
6. });

Use jquery plug-in to implement Paging

Jquery has a plug-in called dataTables. You can find it.
Jquery. dataTables. min. js

Who has JQuery's paging plug-in and demo? The next page and the total number of pages on the previous page, the jump box, and the digital navigation?

It is convenient to use the pagination plug-in of jquery:
<Div id = "Pagination" class = "pagination"> <! -- The paging navigation is displayed here --> </div>
<Script>

$ (Function (){
Var num_entries = 1000; // This is the total number of entries to be displayed
$ ("# Pagination"). pagination (num_entries ,{
Num_edge_entries: 1, // Number of edge pages
Num_display_entries: 10, // number of subject pages
Callback: pageselectCallback, // callback function. In this function, write the display list code.
Items_per_page: 50, // number of items displayed on each page
Prev_text: "Previous Page ",
Next_text: "Next page"
});
});
// Callback function
Function pageselectCallback (page_index, jq ){
// Load the page display content through ajax
$. Post ("ServerCode", {pageno: page_index}, function (result ){
// The result is traversed and displayed.
});
});
</Script>

// Server ServerCode
Receive the pageno parameter and return the information to be displayed on this page.