插件介紹

此插件是jQuery的ajax分頁插件。分頁切換時無刷新也無延遲，因為是一次性加載的。如果你用到此插件作分頁的時候，涉及到的數據量大，建議不要使用此插件，因為加載慢會導致用戶體驗不好！

插件使用

此插件使用比較簡單。主要引入以下文件就可以用了
1.jquery.js依賴庫
2.pagination.css 這個主要是樣式，我們在元素使用的時候將分頁列表放在class類為pagination的標簽內即可

<div class=‘pagination‘></div>

3.jquery.pagination.js 分頁的主要骨架

參數說明

使用方法

1 $("#Pagination").pagination(pageCount, {
 
2         num_edge_entries: 2,
3         num_display_entries: 4
4         callback: pageselectCallback,
5         items_per_page:10,
6         prev_text: "<上一頁",
7         next_text: "下一頁>"
8     });

上面代碼中的pageCount一般是從後臺返回的總的數據條數，也就是你一共有多少條數據。num_dege_entries:2表示首尾兩側分頁顯示2個。num_display_entries:4表示的是連續分頁顯示的主體數目，item_per_page:每頁顯示的列表項為10個。callback:pageselectCallback為回調函數。prev_text和next_text為前一頁下一頁按鈕上的顯示文字，默認的話是Prev 和 Next。

主要代碼與效果展示

1.效果圖

2.主要代碼

 1 //首次查詢： 
 2     offline_mark = keeper_offline("1");
 3     if (offline_mark != false) {
 4         offlinePageMark();//分頁查詢
 5     }
 6     //--分頁
 7     function offlinePageMark(){
 8         $("#offlinePage").pagination(offline_mark,        {
 9             num_edge_entries: 1, //
 
邊緣頁數     
10             num_display_entries: 5,//主體頁數
11             callback: offlinePageCallback,
12             items_per_page: 2, //每頁顯示2項
13             prev_text: "<上一頁",
14             next_text: "下一頁>"
15         });
16     }
17 
18     function offlinePageCallback(page_index, jq) {
19         var page_index = parseInt(page_index + 1);
20         keeper_offline(page_index);
21         return false;
22     }
23     function keeper_offline(pageStr){
24         var offline_mark = false;
25         var params={};
26         params.helperId=helperId;
27         params.homeStatus = "offline";
28         params.page = pageStr;      
29         $.ajax({
30                 type: ‘post‘,
31                 dataType: ‘json‘,
32                 async:true,
33                 url: house_keeperURL,
34                 data:{params:JSON.stringify(params)},
35                 success: function (result) {
36                     if (result.retCode=="0000"){
37                         offline_mark = result.pageCount;
38                         //列表內容展示代碼集，太多了，就省略了，根據各自需求去展示自己的內容就可以了                                             
39                     }else{                              
40                     }
41                 }
42             })
43             return offline_mark;
44     }

總結：

jquery pagination 是一個很好用的分頁插件，展示的效果也是能適應大多需求的，樣式的話也可以自己去改她的css就可以了。上手極其容易。我剛始接觸分頁的時候，並沒有用這個插件。而是自己去寫的一些共通的方法，代碼也不多。後來，有了她，我就直接用她了。不過，我現在也不用她去分頁了，現在用的就是layui的分頁插件。如果還有不懂的童鞋，可以加我vx:1048725765。可以給我留言你的問題。

淺談jQuery Pagination Ajax 分頁插件的使用