javascript - 如何使用 jQuery 对多个 HTML tbody 进行分页

Question

我从 d3 中提取了这张表，其中它对位于单独 tbodies 中的条目进行了分组，因此条目在排序时保持分组状态。我正在使用 tablesorter 插件来帮助对 tbodies 进行排序，这简直太棒了，但是此时，您不能将其分页小部件与可排序的 tbodies 一起使用。

我有 d3 处理所有的表格绘制，所以如果有一个插件可以处理这个问题那就太好了。这次我必须使用 d3，因为我需要一个可排序的嵌套表，这样排序时不会导致组破裂，否则数据表插件就很好了。它有点像帐单，您可以在其中查看多个帐户，其中包含摘要和详细信息。 D3 允许进行嵌套分组，并且 tablesorter 插件非常好，可以对数据的详细信息和总计进行排序。有没有办法 D3 或任何其他工具可以对所有 tbodies 进行分页？

为了解决这个问题，我尝试使用传统的分页器，但它们只适用于常规表。这是一个具有嵌套表的 D3 表，重要的是它可以对详细信息和摘要进行排序。这是我正在处理的事情的一个 fiddle : https://jsfiddle.net/mcsmitheslc/mns6183o/

这是一个分页器，我有一些工作，但似乎有点矫枉过正，像这样手动完成这一切:

    // Paginate the table, there's a plugin but it's not able to handle the nesting yet
    $('.paginated').each(function () {
        var $table = $(this);
        var itemsPerPage = 25;
        var currentPage = 0;
        var pages = Math.ceil($table.find("tr.detail-row:not(:has(th))").length / itemsPerPage);
        var allRows = merged.length;
        var shownRows = $('#table .detail-row:visible').length;

        $table.bind('repaginate', function () {
            if (pages > 1) {
                var pager;
                if ($table.next().hasClass("pager")) {
                    pager = $table.next().empty();
                } else
                    pager = $('<div class="pager" id="" style="padding-top: 20px; direction:ltr; " align="center"></div>');

                $('<button class="button hollow" id="first-button"></button>').text(' « First ').bind('click', function () {
                    currentPage = 0;
                    $table.trigger('repaginate');

                }).appendTo(pager);

                $('<button class="button hollow" id="previous-button"> « Prev </button>').bind('click', function () {
                    if (currentPage > 0)
                        currentPage--;
                    $table.trigger('repaginate');
                }).appendTo(pager);

                var startPager = currentPage > 2 ? currentPage - 2 : 0;
                var endPager = startPager > 0 ? currentPage + 3 : 5;
                if (endPager > pages) {
                    endPager = pages;
                    startPager = pages - 5;
                    if (startPager < 0)
                        startPager = 0;
                }

                for (var page = startPager; page < endPager; page++) {
                    $('<button id="pager-button" class="button tiny"><span id="pg' + page + '" class="' + (page == currentPage ? 'pg-selected' : 'pg-normal') + '"></span></button>').text(page + 1).bind('click', {
                        newPage: page
                    }, function (event) {
                        currentPage = event.data['newPage'];
                        $table.trigger('repaginate');
                    }).appendTo(pager);
                }

                $('<button class="button hollow" id="next-button"> Next » </button>').bind('click', function () {
                    if (currentPage < pages - 1)
                        currentPage++;
                    $table.trigger('repaginate');
                    console.log('Viewing ' +currentPage);
                }).appendTo(pager);
                $('<button class="button hollow" id="last-button"> Last » </button>').bind('click', function () {
                    currentPage = pages - 1;
                    $table.trigger('repaginate');
                    var rowCount = $('#table tbody tr').length;
                    var numOfVisibleRows = $('tbody tr:visible').length;
                    var diff = currentPage * 25;
                    var remainingRows = allRows - diff;
                    console.log('Viewing ' +currentPage);
                    console.log(diff + 'sliced' +remainingRows + ' on the last page');
                }).appendTo(pager);

                if (!$table.next().hasClass("pager"))
                    pager.insertAfter($table);
            }
            $table.find(
                'tbody tr:not(:has(th))').hide().slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).show();

        });

        $table.trigger('repaginate');

    });

Answer 1

很高兴您根据我发布的评论返回了迄今为止所尝试的内容。昨天我因为工作太忙而没能做这件事。无论如何，现在已经开始工作了。

我对其进行了一些更改，并添加了某些附加功能(第一个、上一个、下一个、最后一个)，现在似乎工作正常。

添加了 HTML:

<div id="toggle-buttons">
<button class="button" data-id="first">
          First Page
        </button>
<button class="button disabled" data-id="previous">
          Prev Page
        </button>
<button class="button" data-id="next">
          Next Page
        </button>
<button class="button" data-id="last">
          Last Page
        </button>            
<button class="button" id="all-button">
          Show All
</button>
</div>

Javascript 根据按钮点击对表格进行分页:

const totalBodies = $('tbody').length;
var counter = 0; // set counter initially to 0

d3.selectAll('#toggle-buttons button').on('click', function () {

if(d3.select(this).classed('disabled'))
    return ;

switch(d3.select(this).attr('data-id')) {
    case 'first':
        counter = 0;
    d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', true);
    d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', false);
            break;
  case 'last':
        counter = totalBodies-1;
    d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', true);        
    d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', false);        
    break;
  case 'next':
            counter++;
    if(counter === totalBodies-1) {
        d3.select(this).classed('disabled', true);
    }
        d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', false);         
    break;
  case 'previous':
            counter--;
    if(!counter) {
        d3.select(this).classed('disabled', true);
    }
        d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', false);         
            break;
}
redraw(counter);
});

解释(我想很容易理解):

1. 切换大小写以确定计数器发生变化的按钮点击次数。 重要切换按钮上的disabled类。
2. redraw(counter) 每次点击按钮时(除非它有禁用类)

这是你的 fiddle fork :

https://jsfiddle.net/shashank2104/noxg31eq/

我默认选择第一页。您可以根据需求进行更改，并在初始阶段相应地添加 disabled 类。另外，我看到一个 table 嵌套在一个 table 中，这看起来不太正确 - 也许 tablesorter 添加了一个 table标签也是如此。你可以看一下。

希望这有帮助。