记kkpager分页控件的使用

时间:2023-03-10 07:12:11
记kkpager分页控件的使用

kkpager支持异步加载分页;

1、页面添加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" />

2、渲染数据

                     //加载分页控件
kkpager.generPageHtml({
//pagerid: 'kkpager1',
mode: 'click',
pno: 1,
//总页码
total: data.totalPage,
//总数据条数
totalRecords: data.totalCount, //点击跳转分页的处理
click: function (n) { $('#J-grid-cont').empty();
$('#kkpager').empty();
$.ajax({
url: "/MarketPlan/GetUnoccupiedMarketJsons",
data: { Keyword: $('#J-Search-Keyword').val(), pageIndex: n },
success: function (data) {
console.log(data);
setData($('#J-grid-cont'), data.res.Result, true);
//加载分页控件
kkpager.generPageHtml({
//pagerid: 'kkpager1',
mode: 'click',
pno: n,
//总页码
total: data.totalPage,
//总数据条数
totalRecords: data.totalCount });
},
error: function (msg) {
console.log(msg);
} }); this.selectPage(n);
}, });

3、注意事项

(1)多次使用分页控件时,分页的页数不会自动更新,默认使用第一次,需要更改源码

             if (enforceInit || !this.inited) {
this.init(config); config.total = kkpager.total;
config.totalRecords = kkpager.totalRecords;
}

(2)注意页码的问题

4、参考链接

(1)https://github.com/pgkk/kkpager