如题,最近用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 */
再来试一下,大功告成!