Question

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

以下是一些示例代码。这就是我的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元素，则可以一次更改所有这些元素。

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

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

fiddle

如果类名.round-可能会在您网页的其他位置使用，则可以通过在showRound函数中指定容器将其限制为您的分页菜单：

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

使用jQuery分割两个或多个表

1 个答案: