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
- PaginationJS改造支持实时更新分页信息
- 谷歌金融 Onebox 实现实时信息更新
- ajax实现异步加载页面,实现信息实时更新
- SwipeRefreshLayout改造,支持下拉刷新
- CListUI的改造--支持checkbox
- 给gloox加上支持接收好友更新头像的信息
- 自己改造的分页存储过程
- 自己改造的分页存储过程
- ArcGIS支持实时地理信息系统
- ArcGIS支持实时地理信息系统
- 改造AdvancedDataGrid — 支持外部drag-drop
- log4j支持Syslog-ng的改造
- 浏览器兼容性改造之为XML支持
- XUtils BitmapUtils 改造以添加drawable支持
- XUtils改造以添加drawable支持
- 基于tobato/FastDFS_Client支持SpringMvc改造
- jQuery插件支持AMD的写法改造
- lucene的实时更新
- 使用百度SDK
- 局部内部类引用外部类中的局部变量必须是final属性的!
- ACM输入输出挂模板
- php中compact,extract,list函数的使用
- Oracle中dual表的用途介绍
- PaginationJS改造支持实时更新分页信息
- Javascript高级程序设计-笔记
- LightOJ 1421 Wavio Sequence 最大上升子序列变形 双dp
- 绿色版MySql 5.7 出现:服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。
- JavaSE 基础笔记 day03
- leetcode小白解题记录——第四题
- vector 容器
- 在读研中的一些困惑,怎样才能写出好的论文。
- 使用 Docker 安装Node-Red Container开发App 藉由IBM Weather Company Data 服务取得世界各地气象资料