我从d3中提取了这张表，其中有分组的条目，这些条目在单独的主体中，因此在排序时条目保持分组。我正在使用tablesorter插件来帮助对tbodies进行排序，这真是棒极了，但是，此时，您不能将它们的分页小部件与可排序的tbodies一起使用。
我让d3处理所有的表格绘图，因此，如果那里有一个可以处理此问题的插件，那就太好了。这次我不得不使用d3，因为我需要一个可排序的嵌套表，该表不会在排序时使组分开，否则datatables插件会很好。有点像帐单，您可以在其中查看多个具有摘要的帐户，然后查看详细信息。 D3允许嵌套分组的发生，并且tablesorter插件很棒，可以同时对详细信息和数据总计进行排序。 D3或任何其他工具可以对所有tbodies进行分页吗？
为解决此问题，我尝试使用传统的分页器，但它们仅在常规表上起作用。这是一个具有嵌套表的D3表，很重要的一点是它可以对详细信息和摘要进行排序。这是我正在处理的东西的一个小提琴： 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');
});
答案 0 :(得分：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);
});
解释（我想应该可以理解）：
disabled类。redraw(counter)每次单击按钮（除非它具有禁用的类）这是您的小提琴的叉子：
https://jsfiddle.net/shashank2104/noxg31eq/
默认情况下，我选择的是第一页。您可以根据需要进行更改，并在初始阶段相应地添加disabled类。另外，我看到table嵌套在table内似乎不太正确-也许tablesorter也添加了table标签。您可以看一下。
希望这会有所帮助。
答案 1 :(得分：0)
我是根据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);