PaginationJS改造支持实时更新分页信息

来源:互联网 发布:php网站解决方案优点 编辑:程序博客网 时间:2024/06/16 12:42

库的地址: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');          }        }      }
0 0