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 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.
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);
});
| Customer | Order | Month |
|---|
Post a Comment for "Paginating A Table With Multiple Elements?"