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

最近做后台管理系统，分页用到的不少，项目中其实已经有分页功能的组件但是不够高度自定义，于是就找到了 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();
            }
        });
  }

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