2

假设我有一张这样的表：

<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 插件已经可以做到这一点，或者我应该自己编写？有什么建议么？

4

3 回答 3

2

传奇，

jQuery 分页插件- 不错的发现。

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

$(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 可能很大，页面转换可能非常缓慢，但是如果您尚未修改数据提供方式，这种方法可以节省您的开发时间。

将来可能对某人有用。

演示

于 2013-03-04T23:43:27.650 回答
0

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

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

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

于 2013-03-04T20:08:03.960 回答
0

我通过一个名为jQuery Pagination Plugin的轻量级插件来完成这项工作。

如果有人感兴趣，这里有一个演示。

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);
});
于 2013-03-04T20:47:24.073 回答