javascript - jQuery を使用した 2 つ以上のテーブルのページネーション

Question

まず最初に、私は自分自身を JavaScript と jQuery の初心者だと考えています。同じページでいくつかのテーブルをページ分割する方法に苦労しています。私が特に達成しようとしているのは、2 つ以上のテーブルがあることですが、それらを 1 つのナビゲーションでページ付けしたいと考えています。たとえば、「前の」リンクをクリックすると、すべてのテーブルが前のページに切り替わります。ページネーションのためにいくつかのスクリプトを変更しようとしましたが、ページングされている唯一のテーブルが最後のテーブルであるため、それを達成できません。それらのほとんどは、テーブルを調べて、すべての行を表示するように設定するだけです: なし. そして、リンクがクリックされると、スクリプトは指定されたページを表示するように設定します: 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 コードを変更する代わりに、テーブルを再編成する必要があるかもしれません。すべてを 1 つのテーブルにまとめようとして、「大きな」テーブルのすべての行に別のテーブルを配置しました?!? が、うまくいかないようでした。