jquery分页插件jquery.tablesorter.pager.js,点击下一页跳到后两页问题
来源:互联网 发布:腾讯云计算数据中心 编辑:程序博客网 时间:2024/03/29 02:04
如题,最近用jquery的分页插件的时候,点击下一页结果跳了两页,分析了下,应该只是在动态生成表格里的数据的时候会出现这样的情况。而且每动态生成一次数据,就会多跳转一页,如此累加。所以分页插件对next按钮绑定的事件没有清除。所以我们就来看一下js的源代码(其实没多少):
(function($) {$.extend({tablesorterPager: new function() {function updatePageDisplay(c) {var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);}function setPageSize(table,size) {var c = table.config;c.size = size;c.totalPages = Math.ceil(c.totalRows / c.size);c.pagerPositionSet = false;moveToPage(table);fixPosition(table);}function fixPosition(table) {var c = table.config;if(!c.pagerPositionSet && c.positionFixed) {var c = table.config, o = $(table);if(o.offset) {c.container.css({top: o.offset().top + o.height() + 'px',position: 'absolute'});}c.pagerPositionSet = true;}}function moveToFirstPage(table) {var c = table.config;c.page = 0;moveToPage(table);}function moveToLastPage(table) {var c = table.config;c.page = (c.totalPages-1);moveToPage(table);}function moveToNextPage(table) {var c = table.config;c.page++;if(c.page >= (c.totalPages-1)) {c.page = (c.totalPages-1);}moveToPage(table);}function moveToPrevPage(table) {var c = table.config;c.page--;if(c.page <= 0) {c.page = 0;}moveToPage(table);}function moveToPage(table) {var c = table.config;if(c.page < 0 || c.page > (c.totalPages-1)) {c.page = 0;}renderTable(table,c.rowsCopy);}function renderTable(table,rows) {var c = table.config;var l = rows.length;var s = (c.page * c.size);var e = (s + c.size);if(e > rows.length ) {e = rows.length;}var tableBody = $(table.tBodies[0]);// clear the table body$.tablesorter.clearTableBody(table);for(var i = s; i < e; i++) {//tableBody.append(rows[i]);var o = rows[i];var l = o.length;for(var j=0; j < l; j++) {tableBody[0].appendChild(o[j]);}}fixPosition(table,tableBody);$(table).trigger("applyWidgets");if( c.page >= c.totalPages ) { moveToLastPage(table);}updatePageDisplay(c);}this.appender = function(table,rows) {var c = table.config;c.rowsCopy = rows;c.totalRows = rows.length;c.totalPages = Math.ceil(c.totalRows / c.size);renderTable(table,rows);};this.defaults = {size: 50,offset: 0,page: 0,totalRows: 0,totalPages: 0,container: null,cssNext: '.next',cssPrev: '.prev',cssFirst: '.first',cssLast: '.last',cssPageDisplay: '.pagedisplay',cssPageSize: '.pagesize',seperator: "/",positionFixed: true,appender: this.appender};this.construct = function(settings) {return this.each(function() {config = $.extend(this.config, $.tablesorterPager.defaults, settings);var table = this, pager = config.container;$(this).trigger("appendCache");config.size = parseInt($(".pagesize",pager).val());/** * add by cross */$(config.cssNext,pager).unbind('click');$(config.cssPrev,pager).unbind('click');/** * add by cross */$(config.cssFirst,pager).click(function() {moveToFirstPage(table);return false;});$(config.cssNext,pager).click(function() {moveToNextPage(table);return false;});$(config.cssPrev,pager).click(function() {moveToPrevPage(table);return false;});$(config.cssLast,pager).click(function() {moveToLastPage(table);return false;});$(config.cssPageSize,pager).change(function() {setPageSize(table,parseInt($(this).val()));return false;});});};}});// extend plugin scope$.fn.extend({ tablesorterPager: $.tablesorterPager.construct});})(jQuery);
我在构造方法里把前一页和后一页的绑定事件取消了,注意我加的两行代码:
/** * add by cross */$(config.cssNext,pager).unbind('click');$(config.cssPrev,pager).unbind('click');/** * add by cross */
再来试一下,大功告成!
- jquery分页插件jquery.tablesorter.pager.js,点击下一页跳到后两页问题
- jquery分页--jquery.pager.js
- jQuery tablesorter 插件使用
- jQuery插件:tablesorter
- jQuery tablesorter 插件使用
- jquery插件tablesorter
- jQuery tablesorter 插件
- jquery插件tablesorter
- jQuery tablesorter 插件使用
- jQuery插件JQuery Pager分页器实现javascript分页功能
- 用jquery.pager.js实现分页
- 用jquery.pager.js实现分页
- jquery实现上一页下一页插件
- [JQuery]分页插件jQuery pager plugin功能扩展
- [JQuery]分页插件jQuery pager plugin功能扩展
- jquery插件tablesorter自动排序
- jquery tablesorter插件的使用
- jquery插件tablesorter自动排序
- Shell Script 提取文件名和文件扩展名的方法
- C++的性能检测
- 好书
- 【转】C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区
- C++中关于写日志文件Log的方法
- jquery分页插件jquery.tablesorter.pager.js,点击下一页跳到后两页问题
- Linux网络环境配置
- 用nmake编译链接程序报错error LNK2019: 无法解析的外部符号_WinMain@16,该符号在函数 ___tmainCRTStartup 中被引用
- C#父类引用指向子类
- 【转】SendMessage 和 PostMessage 的区别
- Struts2拦截器
- UVa OJ全部题目列表(按难度分级,仅标题)
- 【学习笔记】log4cxx配置详解
- Exception初识