Jquery表分页只适用于具有多个实例的最后一个表

Question

我正在构建表分类器和分页脚本。排序工作正常，并且最后一张桌子上的分页也起着一个魅力。分页的上一个和下一个按钮在所有先前的表格上都被打破。有人可以告诉我为什么吗？

这里是jQuery插件：

(function($) 
{ 
    $.fn.tableSorterTwo = function(options) 
    { 
     var defaults = { 
      pagination: 20 
     } 

     var options = $.extend(defaults, options); 

     return this.each(function() 
     { 
      $(this).find('thead').addClass('noselect'); 
      $(this).find('thead th').each(function(column) 
      { 
       $(this).addClass('sorting').click(function() 
       { 
        var $table = $(this).parent().parent().parent(); 
        var findSortKey = function($cell) 
        { 
         return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); 
        }; 

        var sortDirection = $(this).is('.sorting_asc') ? -1 : 1; 
        var $rows = $table.find('tbody tr').get(); 

        $.each($rows, function(index, row) 
        { 
         row.sortKey = findSortKey($(row).children('td').eq(column)); 
        }); 

        $rows.sort(function(a, b) 
        { 
         if(!isNaN(a.sortKey) && !isNaN(b.sortKey)) 
         { 
          var val = a.sortKey-b.sortKey; 
          if(val < 0) return -sortDirection; 
          if(val > 0) return sortDirection;      
         } 
         else if(a.sortKey.indexOf("%") >= 0) 
         { 
          var a = a.sortKey.replace(' %', ''); 
          var b = b.sortKey.replace(' %', ''); 
          var val = a-b; 
          if(val < 0) return -sortDirection; 
          if(val > 0) return sortDirection; 
         } 
         else 
         { 
          if(a.sortKey < b.sortKey) return -sortDirection; 
          if(a.sortKey > b.sortKey) return sortDirection; 
         } 
         return 0; 
        }); 

        $.each($rows, function(index, row) 
        { 
         $table.find('tbody').append(row); 
         row.sortKey = null; 
        }); 

        $table.find('thead th').removeClass('sorting_asc sorting_desc'); 
        var $sortHead = $table.find('thead th').filter(':nth-child(' + (column + 1) + ')'); 
        sortDirection == 1 ? $sortHead.addClass('sorting_asc') : $sortHead.addClass('sorting_desc'); 
        $table.find('tbody tr').removeClass('sorting').filter(':nth-child(' + (column + 1) + ')').addClass('sorting'); 
        zebraRows($table); 
       });  
      }); 

      // PAGINATION 
      var totalRows = $(this).find('tbody tr').size(); 
      if(totalRows > options.pagination) 
      { 
       var totalPages = Math.ceil(totalRows/options.pagination); 
       $(this).find('tbody').after('<tfoot><tr><th colspan="3" class="table-pagination"></th></tr></tfoot>'); 
      } 

      var currentLink = 0; 
      var numberLinks = ''; 
      if(totalPages > 1) 
      { 
       while(totalPages > currentLink) 
       { 
        var active = (currentLink == 0) ? ' table-pagination-link-active' : ''; 
        checkLinks($(this), currentLink, totalPages); 
        numberLinks += '<a href="' + (currentLink+1) + '" class="table-pagination-link' + active + '">' + (currentLink+1) + '</a>'; 
        currentLink++; 
       } 
       $(this).find('tfoot tr th').html('<a href="1" class="table-pagination-link table-pagination-link-first no-active">&#171;</a>' + 
       '<a href="1" class="table-pagination-link table-pagination-link-previous no-active">&#8249;</a>' + 
       numberLinks + 
       '<a href="2" class="table-pagination-link table-pagination-link-next no-active">&#8250;</a>' + 
       '<a href="' + totalPages + '" class="table-pagination-link table-pagination-link-last no-active">&#187;</a> | <span class="table-pagination-overview no-active">1</span>/<span class="table-pagination-total no-active">' + totalPages + '</span>'); 
       $(this).find('tbody tr').hide().slice(0, options.pagination).show(); 
       $(this).find('.table-pagination-link-previous').hide(); 
       $(this).find('.table-pagination-link-first').hide(); 
      } 

      $('.table-pagination-link').click(function() 
      { 
       var table = $(this).parents('table'); 
       var href = $(this).attr('href'); 
       $(table).find('.table-pagination-link').removeClass('table-pagination-link-active'); 
       if(!$(this).hasClass('no-active')) 
       { 
        $(this).addClass('table-pagination-link-active'); 
       } 
       if(href == totalPages) 
       { 
        markActive(table, totalPages) 
       } 
       else if(href == 1) 
       { 
        markActive(table, href); 
       } 
       goToPage(table, href, options.pagination); 
       return false; 
      }); 
     }); 
    }; 

    function zebraRows(table) 
    { 
     $(table).find('tbody tr:even').removeClass('even').addClass('even'); 
    } 

    function markActive(table, href) 
    { 
     $(table).find('a[href="' + href + '"]').addClass('table-pagination-link-active'); 
     $(table).find('.no-active').removeClass('table-pagination-link-active'); 
    } 

    function goToPage(table, page, pagination) 
    { 
     var previous = parseInt(page)-1; 
     var next = parseInt(page)+1; 
     $(table).find('.table-pagination-overview').html(page); 
     var page = parseInt(page)-1; 
     var start = page*pagination; 
     var end = start+pagination; 
     $(table).find('tbody tr').hide().slice(start, end).show(); 
     checkLinks(table, page, $(table).find('.table-pagination-total').html()); 
     $(table).find('.table-pagination-link-previous').attr('href', previous); 
     $(table).find('.table-pagination-link-next').attr('href', next); 
     return false; 
    } 

    function checkLinks(table, currentLink, totalPages) 
    { 
     if(currentLink == 0) 
     { 
      $(table).find('.table-pagination-link-previous').hide(); 
      $(table).find('.table-pagination-link-first').hide(); 
      $(table).find('.table-pagination-link-next').show(); 
      $(table).find('.table-pagination-link-last').show(); 
     } 
     else if(currentLink == (totalPages-1)) 
     { 
      $(table).find('.table-pagination-link-next').hide(); 
      $(table).find('.table-pagination-link-last').hide(); 
      $(table).find('.table-pagination-link-previous').show(); 
      $(table).find('.table-pagination-link-first').show(); 
     } 
     else 
     { 
      $(table).find('.table-pagination-link-previous').show(); 
      $(table).find('.table-pagination-link-first').show(); 
      $(table).find('.table-pagination-link-next').show(); 
      $(table).find('.table-pagination-link-last').show(); 
     } 
    } 
})(jQuery); 

呼叫功能：$('.data-table').tableSorterTwo({pagination: 15})

我也有在我工作的的jsfiddle：http://jsfiddle.net/Tra9N/15/

这个问题不是目的，而是如果有人对我的插件有改进或者提示，请分享。它仍然没有完成，我的第一个jquery插件，所以任何提示都表示赞赏！

Answer 1

在您的jsfiddle示例中，更改页面事件每次点击发射两次，这会导致后退按钮跳过两页而不是一页。

看起来像是这样，因为在你的例子中你有两个表格，你的代码将点击事件连接到每个循环中的每个.table-pagination-link链接。您可以通过将范围限制在当前表格来解决此问题。所以更换：

$('.table-pagination-link').click(function() 

有了这个：

$('.table-pagination-link', this).click(function() 

Working jsFiddle example。