使用jQuery对两个或更多表格进行分页

Question

让我先说我认为自己是一个JavaScript和jQuery初学者。我在如何在同一页上对几个表进行分页时遇到困难。我特别想要实现的是我有两个或更多表格，但我想用一个导航对它们进行分页。例如，如果我点击一个“上一个”链接，所有的表格都会切换到上一页。我试图修改几个分页脚本，但我无法实现，因为唯一的分页表是最后一个。他们大多数只是通过表格并将所有行设置为显示：无。然后，当单击链接时，脚本将给定页面设置为显示：table-row，但它仅影响最后一个表格的页面。它似乎只保留内存中的最后一个表。我的意见是，每次点击分页链接时都会浏览所有表格，但我无法实现。有可能有更好的解决方案，也许这很容易做到，但我想我没有所需的知识。

以下是一些示例代码。这是我的HTML表格什么样子：

<div id="pagination-menu"></div> 
<table> 
    <tr><th>Header</th></tr> 
    <tr><td>Data</td></tr> 
    . 
    . 
    . 
</table> 
<table> 
    <tr><th>Header</th></tr> 
    <tr><td>Data</td></tr> 
    . 
    . 
    . 
</table> 

jQuery的脚本超过100行，所以我只是张贴的行的显示方式，创建的链接，一个片段会发生什么，当一个链接被点击（round-x是我设置为所有行的类，具体取决于它们所在的页面）：

(function($) { 

    $.fn.jPaginate = function(options) { 

     var defaults = { 
      'items_per_page' : 4, 
      'active_page' : 1, 
     }; 

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

     // Check the given values 
     parameters.items_per_page = Math.max(1, parameters.items_per_page); 
     parameters.active_page = Math.max(1, parameters.active_page); 

     // Plugin code 
     return this.each(function() { 
      var $table = $(this); 

      if ($table.is('table')) { 
       // We get the container (table or tbody) 
       var $container = $table.find('tbody'); 

       if ($container.length == 0) { 
        $container = $table; 
       } 

       var number_of_pages = 0; 

       $container.find('tr').each(function(i) { 
        var $row = $(this); 

        if (i % parameters.items_per_page == 0) { 
         number_of_pages++; 
        } 

        // We add class to rows, and hide them 
        $row.addClass('round-' + number_of_pages); 

        if (number_of_pages != parameters.active_page) { 
         $row.hide(); 
        } 
       }); 

       if (number_of_pages > 1) { 
        function showPage(num) { 
         $container.find('tr').hide(); 
         $container.find('.round-' + num).css('display', 'table-row'); 
        } 

        var linksHTML = ''; 

        for (var i = 1; i <= number_of_pages; i++) { 
         linksHTML += '<a class="round-link' + (i == parameters.active_page ? ' round-active' : '') + '" href="#">' + i + '</a> '; 
        } 

        $('#pagination-menu').html(linksHTML); 

        $('.round-link').click(function(e) { 
         e.preventDefault(); 
         $('#pagination-menu').find('a').removeClass('round-active'); 
         $(this).addClass('round-active'); 
         showPage($(this).text()); 
        }); 
       } 
      } 
     }); 
    }; 
})(jQuery); 

所以就是这样。也许我需要重新组织表，而不是改变jQuery代码。我试图把所有东西都放在一张桌子里，在“大”桌子的每一排中，我放了另一张桌子，但它看起来并不好。

Answer 1

我认为你的问题是你每次覆盖$container的每张表都只能指向最后一张。

如果更改showRound以搜索具有round- * classname的所有tr元素，则可以一次更改所有tr元素。

function showRound(num) { 
    $('tr[class^=round-]').hide(); 
    $('.round-' + num).css('display', 'table-row'); 
} 

然后，您可以移动$('.round-link').click(...外循环，因为它只需要被调用一次（仅每锚1个处理不是每个锚每桌一个处理器）

fiddle

如果类名.round-可能在您的页面的其他地方使用，您可以通过在showRound功能中指定容器将其限制为分页菜单：

function showRound(num) { 
    $('#container').find('tr[class^=round-]').hide(); 
    $('#container').find('.round-' + num).css('display', 'table-row'); 
}