Question

我们说我有一张这样的表：

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

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

将来可能对某人有用。

Demo

Answer 2

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

正如评论中所说，Datatables似乎是你走的最佳方式。我也可以考虑SlickGrid

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

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

用多个元素拼凑一张桌子？

3 个答案: