Javascript 如何使用jQuery对多个HTML tbodies进行分页

我从d3中提取了这个表，在d3中，它对单独tbodies中的条目进行了分组，以便在排序时条目保持分组。我正在使用tablesorter插件来帮助对tbodies进行排序，这非常棒，但是在这一点上，您不能将它们的分页小部件与可排序tbodies一起使用

我有d3处理所有的表格绘图，所以如果有一个插件可以处理这个，那就太好了。这一次我不得不使用d3，因为我需要一个可排序的嵌套表，这样在排序时分组就不会分开，否则datatables插件会很好。这有点像账单，你可以查看多个账户的摘要，然后查看详细信息。D3允许嵌套分组，而tablesorter插件非常适合对数据的细节和总数进行排序。D3或任何其他工具是否有办法对所有tbodies进行分页

为了解决这个问题，我尝试使用传统的分页器，但它们只适用于常规表。这是一个具有嵌套表的D3表，它可以根据详细信息和摘要进行排序，这一点很重要。以下是我正在处理的一些问题：

这是一个paginator，我做了一些工作，但似乎有点过火了，都是用手做的，像这样：

    // 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');

    });

---

我自己根据Shashank发布的内容得到了一些：

        let tbodiesPerPage = 10;
    const totalBodies = $('tbody').length;

    d3.select("#buttons").datum({
        portion: 0
    });

    // the chain select here pushes the datum onto the up and down buttons also
    d3.select("#buttons").select("#previous-button").on("click", function (d) {
        console.log('next was ', d.portion);
        if (d.portion - tbodiesPerPage >= 0) {
            d.portion -= tbodiesPerPage;
            redraw(d.portion);
        }
    });

    d3.select("#buttons").select("#next-button").on("click", function (d) {
        // let the bodies hit the floor
        console.log('previous was', d.portion);
        if (d.portion < (totalBodies - tbodiesPerPage)) {
            d.portion += tbodiesPerPage;
            redraw(d.portion);
        }
    });

    function redraw(start) {
        d3
            .select("table")
            .selectAll("tr")
            .style("display", function (d, i) {
                return i >= start && i < start + tbodiesPerPage ? null : "none";
            });
    }

    redraw(0);

---

很高兴你回来了，根据我的评论，到目前为止你一直在尝试。我昨天不能做这件事，因为我工作太忙了。不管怎么说，现在开始工作了

我对它做了一些修改，还添加了一些额外的功能，第一个、上一个、下一个、最后一个，现在似乎工作正常

添加了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>

我想这个解释很容易理解：

切换案例，以确定计数器将根据哪个按钮单击进行更改。重要信息：在按钮上切换禁用的类。 每次单击按钮时都会重新绘制计数器，除非它具有禁用的类 这是你的小提琴叉子：

默认情况下，我选择第一页。您可以根据需要更改它，并在初始阶段相应地添加禁用的类。此外，我看到一个嵌套在表中的表似乎不正确——可能tablesorter也添加了一个表标记。你可以看看

---

希望这有帮助。

不确定您的要求。看看这个。这可用于排序、分页和搜索。可能对您有帮助如果有问题要求我们推荐或查找书籍、工具、软件库、教程或其他非网站资源，则会导致堆栈溢出，因为这些问题往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。嘿@Christina，我确实记得看到你关于这个嵌套/分组表的问题，但没有时间回答。无论如何，如果您可以将上述表格作为一个片段包含在这个问题中，那么提供解决方案就更容易了。就分页而言，我不认为有任何特定的d3插件可以实现这一点，但可能确实有用，并且可以开始使用。@Kuru，我过去使用过datatables，但这次它不起作用，因为当我在对表中的各个列进行排序时将组放在一起时，它失败了。谢谢@Shashank。你发布的链接是一个开始。我有我的tbodies计数，我有d3现在做类似的事情。它以十人一组的方式成功点击。还有一些事情需要处理，比如当up超过0时如何处理。这太棒了，谢谢你看这个。我相信这也是来自tablesorter。看起来我要做的最后一步就是向所有人展示：是的，你必须完成最后一步。如果我能为你这么做的话，我的答案会被否决，因为我的答案远远超过了要求：p。不管怎样，很高兴我能帮上忙：不用担心，我知道了。谢谢你帮我澄清。否则手工制作会越来越复杂。当然。举手之劳但我仍然认为，在这种情况下，我们应该能够使tablesorter内置分页工作。无论如何，自定义分页现在也可以变成插件了。哈哈，真的。这将是非常有用的，因为这些类型的表为希望在浏览器中使用Exvel pivot表的用户提供了良好的总体用户体验

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);
});