如何使用jQuery對多個HTML正文進行分頁

Question

我從d3中提取了這張表，在此表中，有分組的條目位於單獨的tbobody中，因此在排序時條目保持分組狀態。 我正在使用tablesorter插件來幫助對tbodies進行排序，這真是棒極了，但是在這一點上，您不能將它們的分頁小部件與可排序的tbodies一起使用。

我有d3處理所有表格繪圖，因此如果那里有一個可以處理此問題的插件，那就太好了。 這次我不得不使用d3，因為我需要一個可排序的嵌套表，該表不會在排序時使組分開，否則datatables插件會很好。 有點像帳單，您可以在其中查看多個具有摘要的帳戶，然后查看詳細信息。 D3允許嵌套分組的發生，並且tablesorter插件很棒，可以同時對詳細信息和數據總計進行排序。 D3或任何其他工具是否可以對所有主體進行分頁？

為了解決此問題，我嘗試使用傳統的分頁器，但這些分頁器僅適用於常規表。 這是一個具有嵌套表的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');

    });

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) （除非它具有禁用的類）

這是您的小提琴叉子：

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

我默認選擇第一頁。 您可以根據要求進行更改，並在初始階段相應地添加disabled類。 另外，我看到一個table嵌套在一個內table這看起來不正確-也許tablesorter增加了一個table標簽為好。 您可以看一下。

希望這可以幫助。

Answer 2

我自己是根據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);