記kkpager分頁控件的使用

kkpager支持異步加載分頁；

一、頁面添加div標籤和引用JS，默認標籤爲<div id="kkpager"></div>

引用JS和樣式

<script type="text/javascript" src="../global/src/kkpager.js"></script>
<link rel="stylesheet" type="text/css" href="../global/src/kkpager_blue.css" />

二、渲染數據

 1                     //加載分頁控件
 2                     kkpager.generPageHtml({
 3                         //pagerid: 'kkpager1',
 4                         mode: 'click',
 5                         pno: 1,
 6                         //總頁碼
 7                         total: data.totalPage,
 8                         //總數據條數
 9                         totalRecords: data.totalCount,
10 
11                         //點擊跳轉分頁的處理
12                         click: function (n) {
13 
14                             $('#J-grid-cont').empty();
15                             $('#kkpager').empty();
16                             $.ajax({
17                                 url: "/MarketPlan/GetUnoccupiedMarketJsons",
18                                 data: { Keyword: $('#J-Search-Keyword').val(), pageIndex: n },
19                                 success: function (data) {
20                                     console.log(data);
21                                     setData($('#J-grid-cont'), data.res.Result, true);
22                                     //加載分頁控件
23                                     kkpager.generPageHtml({
24                                         //pagerid: 'kkpager1',
25                                         mode: 'click',
26                                         pno: n,
27                                         //總頁碼
28                                         total: data.totalPage,
29                                         //總數據條數
30                                         totalRecords: data.totalCount
31 
32                                     });
33                                 },
34                                 error: function (msg) {
35                                     console.log(msg);
36                                 }
37 
38                             });
39 
40                             this.selectPage(n);
41                         },
42                         
43                     });

View Code

三、注意事項

（1）屢次使用分頁控件時，分頁的頁數不會自動更新，默認使用第一次，須要更改源碼

1             if (enforceInit || !this.inited) {
2                 this.init(config);
3 
4                 config.total = kkpager.total;
5                 config.totalRecords = kkpager.totalRecords;
6             }

View Code

（2）注意頁碼的問題

四、參考連接

（1）https://github.com/pgkk/kkpager