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();

            }

        });

  }

巴特西

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

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

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

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

最新文章

热门文章