使用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'); 
}