使用多个 <tbody> 元素对表格进行分页？答案

【问题标题】：Paginating a table with multiple <tbody> elements?使用多个 <tbody> 元素对表格进行分页？
【发布时间】：2013-02-19 00:43:02
【问题描述】：

假设我有一张这样的桌子：

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
    ....
    .... 1000s of records like this
</table>

有没有一种方法可以基于tbody 元素进行分页？例如，我想在第 1 页显示前 50 条记录，依此类推。是否有一个 jQuery 插件已经可以做到这一点，或者我应该自己编写？有什么建议吗？

【问题讨论】：

使用 JavaScript 处理页面上的 1000 个元素是矫枉过正，为什么不在服务器端这样做呢？
我不知道该结构的特定分页器。自己写应该不会太难。数学很简单，jQuery 使选择/显示/隐藏变得微不足道。大约 3 小时的工作经过全面测试。
datatables.net 有分页选项。
@undefined：所以如果我理解正确，即使获取数据并保留在客户端（以供将来渲染）也是昂贵的，所以你建议我在服务器端实现分页并获取要在当前页面上显示的数据？
最初只隐藏除第一个 tbody 之外的所有 tbody，并为表格中的每个 tbody 添加一个页面链接，显示该特定 tbody 并在点击时隐藏其余部分。 jQuery 应该使这相对容易。不过，我更喜欢使用 ajax 和服务器进行分页，以防止向用户发送大量用户可能不会使用的数据。

标签： javascript jquery html css html-table

【解决方案1】：

传奇，

jQuery Pagination Plugin - 不错的发现。

这是一种使用插件更接近您最初要求的方法。

$(document).ready(function () {
    var $tbodies = $("#myTable tbody");

    // Create pagination element with options from form
    var paginationOpts = {
        callback: pageselectCallback,
        items_per_page: 5,
        num_display_entries: 10,
        num_edge_entries: 2,
        prev_text: "Prev",
        next_text: "Next"
    };

    function pageselectCallback(page_index, jq) {
        //calculate limits of the page in terms of tbody indices
        var limits = {
            start: page_index * paginationOpts.items_per_page,
            end: (page_index + 1) * paginationOpts.items_per_page
        };
        $tbodies.filter(":visible").hide();
        $tbodies.slice(limits.start, limits.end).show();
        // Prevent click eventpropagation
        return false;
    }

    $("#Pagination").pagination($tbodies.length, paginationOpts);
});

我并不是说这更好。对于 1000 多个 tbodies，HTML 可能很大，页面转换可能非常缓慢，但是如果您尚未修改数据提供方式，这种方法可以节省您的开发时间。

将来可能对某人有用。

Demo

【讨论】：

+1 感谢您抽出宝贵时间。由于某种原因，我无法访问链接？此外，在我的方法中，我不是一次构建整个 HTML，而是取决于正在查看的页面视图。另外，我同意你的评论。我缺乏远见 - 我应该刚刚在服务器端实现分页。很好的教训:)
传奇，是的，通过将数据作为 javascript 而不是完全形成的 HTML 提供数据，您的页面会更小。 FWIW，我已经更正了指向小提琴的链接。

【解决方案2】：

最有效的方法是实现分页服务器端。

正如评论中所说，Datatables 似乎是您的最佳选择。我也可以考虑SlickGrid

请注意，您可以使用这些 API 选择客户端或服务器端分页

【讨论】：

谢谢。我唯一担心的是，这些似乎对传统表格（一个tbody 标签和多个tr 标签）是开箱即用的。但是，在我的用例中，我有一个自定义布局，我不明白如何为我的用例调整这些插件。您对此有什么建议吗？
这个页面似乎回答了你的问题：http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html。您可以覆盖 fnDrawCallback 以为每个组创建一个新的 tbody 标记。

【解决方案3】：

我通过一个名为 jQuery Pagination Plugin 的轻量级插件来实现这一点。

如果有人感兴趣，这里是demo。

HTML：

<div id="Pagination" class="pagination"></div>
<br style="clear:both" />
<table id="Searchresult"></table>

JS：

var members = [
    // Any data array
];

var n = "";
function pageselectCallback(page_index, jq) {
    // Get number of elements per pagionation page from form
    var items_per_page = 5;
    var max_elem = Math.min((page_index + 1) * items_per_page, members.length);
    var newcontent = '';

    // Iterate through a selection of the content and build an HTML string
    newcontent = "<table>";
    for (var i = page_index * items_per_page; i < max_elem; i++) {
        newcontent += '<tbody><tr><td>' + members[i][0] + '</td></tr>';
        newcontent += '<tr><td class="state">' + members[i][2] + '</td>';
        newcontent += '<td class="party">' + members[i][3] + '</td></tr></tbody>';
    }
    newcontent += "</table>";

    // Replace old content with new content
    $('#Searchresult').html(newcontent);

    // Prevent click eventpropagation
    return false;
}

$(document).ready(function () {
    // Create pagination element with options from form
    var opt = {
        callback: pageselectCallback
    };
    opt.items_per_page = 5;
    opt.num_display_entries = 10;
    opt.num_edge_entries = 2;
    opt.prev_text = "Prev";
    opt.next_text = "Next";

    $("#Pagination").pagination(members.length, opt);
});

【讨论】：