0

首先让我说我认为自己是一个 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 代码。我试图把所有东西都放在一张桌子上，在“大”桌子的每一行，我都放了另一张桌子？！？，但似乎不太好。

4

1 回答 1

1

我认为你的问题是你每次覆盖的每个表$container，所以它只指向最后一个。

如果您更改showRound为搜索所有带有 round-* 类名的 tr 元素，您可以一次更改所有这些元素。

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

然后您可以移出$('.round-link').click(...循环，因为它只需要调用一次（每个锚点只有 1 个处理程序，而不是每个锚点每个表一个处理程序）

小提琴

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

function showRound(num) {
    $('#container').find('tr[class^=round-]').hide();
    $('#container').find('.round-' + num).css('display', 'table-row');
}
于 2013-07-02T11:25:16.087 回答