Pagination is one of most common things we
face everywhere, wherever there is no infinite scrolling. Pagination can be
achieved server side with php as well, but those is bit slower and require
multiple request again and again to site or you need to precisely use ajax, but
what if you want simpler solution, that’s going to be great for you and user as
well.
What’s my idea?
Instead of downloading list of 10 row per
request from server each time user navigate through pages, why not download 100
or even more list once, that will need just moment to download and no
additional effort to server, and using pagination hide rest of 90 rows, using client
side pagination of tables we can navigate to those 100 records without making
much effort, and even if user want more, only in that case we can download
further list.
Simple, users don’t have to wait again and
again to refresh page, get 10 more data, again refresh, and so on. Instead user
will be having lightning access to all 100 record or whatever number you have
at once.
So lets get started
What you’ll need.
1. You
have to have jquery Google ajax api, that you can
get from here.
2. Any
html/PHP page where you have table, you can deploy this code.
Initiating pagination in table
Proceed as follows to adding pagination in
your table.
Adding Google ajax api in your html head section
First of all, you need to add, Google jquery
library to initiate this JavaScript. Just navigate to <head> of your site
and add
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
|
Just before closing of your head.
Adding pagination class to your table
First of all, you have to add class “paginated-table”
in your table as follows
<table class=”paginated-table”>
.
.
.
|
Adding navigation below table
You can add following code after just ending
or before table tag of same table in which you want pagination.
I am assuming you have bootstrapped and font
awesome integrated, if not, no problem, you can leave these classes as it is.
<span
class="prev btn btn-rounded btn-light"><i class="fa
fa-angle-double-left"></i> Previous</span> <span
class="next btn btn-rounded
btn-light"><i class="fa
fa-angle-double-right"></i> Next</span>
|
Adding pagination script
Copy and paste following code and at the
ending of your body tag, add this with script tag. You can see a variable to
define max row that should display on each segment, you can change this to any
number from 1 to less than table value count.
<script>
var maxRows = 5; //
Define per page element count
$('.paginated-table').each(function() {
var cTable = $(this);
var cRows =
cTable.find('tr:gt(0)');
var cRowCount = cRows.size();
if (cRowCount < maxRows) {
return;
}
cRows.each(function(i) {
$(this).find('td:first').text(function(j, val) {
return (i + 1) +
" - " + val;
});
});
cRows.filter(':gt(' +
(maxRows - 1) + ')').hide();
var cPrev =
cTable.siblings('.prev');
var cNext =
cTable.siblings('.next');
cPrev.addClass('disabled');
cPrev.click(function() {
var cFirstVisible =
cRows.index(cRows.filter(':visible'));
if
(cPrev.hasClass('disabled')) {
return false;
}
cRows.hide();
if (cFirstVisible -
maxRows - 1 > 0) {
cRows.filter(':lt(' +
cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
} else {
cRows.filter(':lt(' +
cFirstVisible + ')').show();
}
if (cFirstVisible -
maxRows <= 0) {
cPrev.addClass('disabled');
}
cNext.removeClass('disabled');
return false;
});
cNext.click(function() {
var cFirstVisible =
cRows.index(cRows.filter(':visible'));
if
(cNext.hasClass('disabled')) {
return false;
}
cRows.hide();
cRows.filter(':lt(' +
(cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) +
')').show();
if (cFirstVisible + 2 *
maxRows >= cRows.size()) {
cNext.addClass('disabled');
}
cPrev.removeClass('disabled');
return false;
});
});
</script>
|
You can now see clicking on next and previous
navigation, jquery table pagination should navigate through paginated rows.
You can download sample html from
and see full code and deployment.
If you having any doubt, please leave comment
below, or want to add something cool to this code, let us know, we’ll improve.
Please +1,Like, and share this article to
anyone who might need this. Have great day
No comments :
Post a Comment