Paginating A Table With Multiple Elements?
Let us say I have a table like this: Customer Order Month Solution 1:
Legend,
jQuery Pagination Plugin - nice find.
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.
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);
});
| Customer | Order | Month |
|---|
Post a Comment for "Paginating A Table With Multiple Elements?"