淺談jQuery Pagination Ajax 分頁外掛程式的使用

標籤：off   簡單   體驗   targe   call   建議   導致   lib   清單項目   

外掛程式介紹

此外掛程式是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: 44         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 分頁外掛程式的使用