库的地址:http://paginationjs.com/index.html
已经好久没更新了,看了下源码,质量比较高,也比较稳定了。
使用过程中发现,分页的信息是初始化的时候固定死的,不够灵活,要是能在获取数据的过程中实时更新分页的信息就好了。
也就是希望流程是这样的:
请求数据->使用分页信息更新分页栏->更新数据dom
而paginationjs是这样的:
初始化,同时初始化分页栏->请求数据->更新dom,只更新分页栏的当前页信息;
也就是说,初始化完了之后,总的页数就固定死了。
debug代码的过程中,发现所有的跳页,包括初始化第一页的时候最终都是调用下面的方法,如下是我的处理方法,在paginationjs请求完数据,更新分页栏的当前页信息之前,更新分页相关的信息,在render函数里会渲染分页条。
有了这个功能之后,非常好使的一个库。
// Go to the specified page
go: function(number, callback) {
var self = this;
var model = self.model;
if (self.disabled) return;
var pageNumber = number;
var pageSize = attributes.pageSize;
var totalPage = model.totalPage;
pageNumber = parseInt(pageNumber);
// Page number out of bounds
if (!pageNumber || pageNumber < 1 || pageNumber > totalPage) return;
// Sync mode
if (self.sync) {
render(self.getDataSegment(pageNumber));
return;
}
var postData = {};
var alias = attributes.alias || {};
postData[alias.pageSize ? alias.pageSize : 'pageSize'] = pageSize;
postData[alias.pageNumber ? alias.pageNumber : 'pageNumber'] = pageNumber;
var formatAjaxParams = {
type: 'get',
cache: false,
data: {},
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: 'json',
async: true
};
$.extend(true, formatAjaxParams, attributes.ajax);
$.extend(formatAjaxParams.data || {}, postData);
formatAjaxParams.url = attributes.dataSource;
formatAjaxParams.success = function(response) {
// 在这重新画分页条
if(response._total){
model.totalNumber=response._total;
}else{
model.totalNumber= 0;
}
if(response.limit){
model.pageNumber=response.limit;
}
if(response.totalPage){
model.totalPage=response.totalPage;
}else{
//利用pageSize和totalNumber计算页数
model.totalPage=Math.ceil(model.totalNumber/model.pageSize)
}
render(self.filterDataByLocator(response));
};
formatAjaxParams.error = function(jqXHR, textStatus, errorThrown) {
attributes.formatAjaxError && attributes.formatAjaxError(jqXHR, textStatus, errorThrown);
self.enable();
};
self.disable();
$.ajax(formatAjaxParams);
function render(data) {
// Before paging
if (self.callHook('beforePaging', pageNumber) === false) return false;
// Pagination direction
model.direction = typeof model.pageNumber === 'undefined' ? 0 : (pageNumber > model.pageNumber ? 1 : -1);
model.pageNumber = pageNumber;
self.render();
if (self.disabled && !self.sync) {
// enable
self.enable();
}
// cache model data
container.data('pagination').model = model;
// format result before execute callback
if ($.isFunction(attributes.formatResult)) {
var cloneData = $.extend(true, [], data);
if (!Helpers.isArray(data = attributes.formatResult(cloneData))) {
data = cloneData;
}
}
container.data('pagination').currentPageData = data;
// callback
self.doCallback(data, callback);
// After pageing
self.callHook('afterPaging', pageNumber);
// Already the first page
if (pageNumber == 1) {
self.callHook('afterIsFirstPage');
}
// Already the last page
if (pageNumber == model.totalPage) {
self.callHook('afterIsLastPage');
}
}
}