Paginating A Table With Multiple Elements?

Question

Let us say I have a table like this:

Solution 1:

Legend,

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 formvar paginationOpts = {
        callback: pageselectCallback,
        items_per_page: 5,
        num_display_entries: 10,
        num_edge_entries: 2,
        prev_text: "Prev",
        next_text: "Next"
    };

    functionpageselectCallback(page_index, jq) {
        //calculate limits of the page in terms of tbody indicesvar 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 eventpropagationreturnfalse;
    }

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

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.

Demo

Solution 2:

The most efficient way is to implement the pagination server side.

As said in the comment, Datatables seems to be the best way for you to go. I might also consider SlickGrid

Note that you have the choose client side or server side pagination with these APIs

Solution 3:

I got this working through a light-weight plugin called jQuery Pagination Plugin.

Here's a demo if anyone is interested.

HTML:

<divid="Pagination"class="pagination"></div><brstyle="clear:both" /><tableid="Searchresult"></table>

JS:

var members = [
    // Any data array
];

var n = "";
functionpageselectCallback(page_index, jq) {
    // Get number of elements per pagionation page from formvar 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 eventpropagationreturnfalse;
}

$(document).ready(function () {
    // Create pagination element with options from formvar 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);
});

Html5 Manual

Paginating A Table With Multiple Elements?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Paginating A Table With Multiple