Paginating A Table With Multiple Elements?
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 |
|---|---|---|
| Has A Class, Add Class To Table Cell |
Let's say I have the following html: …
WebRTC Video Constraints Not Working
I'm trying to get a lower resolution from the webcam na…
HasClass Doesn't Work In My Js Code?
I want to use hasClass in the following code, but that does…
I am relatively new to Javascript/Ajax. When the user click…
Highcharts Donutchart: Avoid Showing Duplicate Legend With Nested Charts
I am trying to represent nested data using Highcharts Donut…
How Do I Use Data From Vue.js Child Component Within Parent Component?
I have a form component where I use a child component. I wa…
Logic For The Next Button For The Questionnaire?
I am beginner in AngularJS and facing some issues. I am try…
Assignment To Property Of Function Parameter (no-param-reassign)
I have this function and while I have this working nicely, …
I am making a web application using nodejs and angular cli …
How To Show Website Preloader Only Once
I added a preloader to my website and the preloader animati…
|
Post a Comment for "Paginating A Table With Multiple