simple高度自定义的jqPaginator 项目中做分页的应用技巧

最近做后台管理系统，分页用到的不少，项目中其实已经有分页功能的组件但是不够高度自定义，于是就找到了 jqPaginator##

高度自定义的Html结构###

初始化引用如下：

$("#paginator").jqPaginator({
totalPages: 1,
visiblePages: 10,
totalCounts:1,
pageSize:20,
currentPage: 1,
first: '

首页

',
prev: '

前一页

',
next: '

下一页

',
last: '

尾页

',
page: '

{{page}}

',
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();
}
});
}

具体的api文档可以参考这里#####