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 */

再来试一下,大功告成!

原创粉丝点击