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

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:

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

Html5 Works

Paginating A Table With Multiple Elements?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Paginating A Table With Multiple