最近做后台管理系统，分页用到的不少，项目中其实已经有分页功能的组件但是不够高度自定义，于是就找到了 jqPaginator##
高度自定义的Html结构###
初始化引用如下：
$("#paginator").jqPaginator({
totalPages: 1,
visiblePages: 10,
totalCounts:1,
pageSize:20,
currentPage: 1,
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
reqNum = num;
dataShow(myorgid,mysearchString,reqNum,function(){
changePaginator();
});
}
});
//初始化后，动态修改配置:
//$('#id').jqPaginator('option', options)
function changePaginator(){
$('#paginator').jqPaginator('option', {
totalPages: totalPages,
totalCounts:totalCounts,
currentPage: reqNum
});
}
当时我犯了个逻辑错误，上来先发请求，拿到 totalCounts ,以为totalPages、totalCounts 这两个属性确实是需要从后台拿到的数据，又因为是异步请求，so 很无奈的将初始化放到了if(data.success){}，后来才发现初始化时其实是可以随便写的，因为后面还有回调，涉及到到 增、删、改、查 的功能，都需要去调 dataShow()来刷新页面渲染的数据，回调中计算 totalPages 即可：
//全局需要定义的变量
//fn其实就是回调的changePaginator()
dataShow = function(orgid,searchString,reqNum,fn){
if(!reqNum){
reqNum = 1;
}
//发送请求，获取数据
$.NstsGET(URl, {orgId:orgid,search:searchString,Limit:20,PageNo:reqNum}, function (data) {
if (data.total == 0) {
totalCounts = 1;
totalPages = 1;
}
if (data.success){
//渲染数据操作
}
if(fn){
fn();
}
});
}