将多个< tbody>元素？ [英] Paginating a table with multiple <tbody> elements?

问题描述

让我们说我有一个这样的表：

Let us say I have a table like this:

<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插件，这已经或应该我自己写？有任何建议吗？

Is there a way I can paginate based on tbody elements? For instance, I want to display the first 50 records on page 1 and so on. Is there a jQuery plugin that does this already or should I write my own? Any suggestions?

推荐答案

图例

jQuery分页插件 - 很好找。

这里有一种使用插件做得更接近你原来要求的方法。

Here's a way to use the plugin to do far more closely to what you asked for originally.

$(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多个tbody，HTML可能是巨大的，页面转换可能会很慢，但这种方法可以节省你的开发时间，如果你还没有修改数据的方式。

I'm not saying this is better. For 1000+ tbodies, the HTML may be huge and page transitions may be horribly slow, but this approach could have saved you development time had you not already revised the way the data is served.

可能对未来的某人有用。

May be of use to someone in the future.

演示

这篇关于将多个< tbody>元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！