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要素に基づいてページネーションする方法はありますか? たとえば、最初の 50 レコードを 1 ページに表示したいとします。すでにこれを行うjQueryプラグインはありますか、それとも自分で作成する必要がありますか? 助言がありますか？

4

3 に答える 3

2

伝説、

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 個以上の tbody の場合、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 に答える