Hello everyone, we all know how often we have requirement
for implementing pagination in a website. As soon as we have this kind of
requirement, we often try to go for either JavaScript or jQuery-based solutions.
The most basic solution which we get from internet is using third party plugins
to achieve those things. For example, we want to implement pagination when we
are having large number of records to display, we can go for jQuery DataTables as
it provides flexible and powerful functionality to implement the same. But have
you wondered how we can implement the pagination without these third-party plugins
by simply using CSS and jQuery?
If not, then please read the blog to see how we can do it.
Let’s go straight to the point and see the implementation
for the same. I am using normal HTML, CSS, and jQuery for the same.
Let’s first create the Html structure showing the List of items. We will see the explanation step by step.
- Coffee
- Tea
- Milk
- Protien
- Shake
- Juice
- Coke
As you can see the Html structure. Its plain simple structure where we are having simple some data in list format.
Now let’s move to the next part where we will implement
pagination logic using jQuery with help of some CSS classes.
Now to our current html structure lets add some more html
and respective classes which will be used in jQuery logic for the
implementation part. First let add class = “related-pagination” to all
our li elements. Add current html <div
id="page_navigation"></div> just before body closing tag.
Add attributes class = "parent-pagination-count" id =
"current_page" data-count="2" to parent div element
of ul tag. Add jQuery reference to head section of the Html. Now updated Html
structure will look like below one.
Its time to see the jQuery required for implementing the pagination. Add script section before end of body tag. Let’s see what is there inside our script. There are few important functions which needs some attentions.
showPage(): This function takes care of hiding the runtime created pagination html structure based on number of count on which the pagination will happen. It also takes care of showing the list of elements based on page size defined. Internally this function calls the makePager(page) function which take the page number to create the require pagination html structure runtime. At first load the 1 is pass as page value to showPage() function which assign current_page value as 1.
makePager(page): This function take care of creating all the required html structure for the pagination. It takes the page value as input parameter to create the required html structure for pagination. When someone click on next button or any other pagination button, the corresponding int value is store in current_page. This current_page is the id of the parent div of ul element. The current_page is nothing but the value of the pagination number to hide show the list item respectively.
There are other functions like next, previous, first and last button in pagination. If you see the code for the same, they are internally calling showPage() function which internally call the makePager() function to create the html structure.
The logic is totally based on hide and show of an element.
Based on current_page number which gets its value when we click on pagination
numbers do the logic of hiding and showing the list content items. The whole
component of pagination is created dynamically by jQuery. Once you have included all this code you will get the below html view based on the page-size define. The data-count property hold the page-size.
Below is the full code Snippet for your reference.
document.addEventListener('DOMContentLoaded', function (event) {
makePager = function (page) {
var show_per_page = jQuery(".parent-pagination-count").data("count");
var number_of_items = jQuery('.related-pagination').length;
var number_of_pages = Math.ceil(number_of_items / show_per_page);
var number_of_pages_todisplay = number_of_pages;
var navigation_html = '';
var current_page = page;
if (current_page != 1) {
navigation_html += "<a class='nextbutton' href=\"javascript:first();\">« Start
</a> <a class='nextbutton' href=\"javascript:previous();\">« Prev </a> ";
}
var pages = number_of_pages_todisplay;
for(var i=1;i<= pages;i++)
{
navigation_html += "<a class='" + ((i == current_page) ? "currentPageButton" : "numericButton") +
"' href=\"javascript:showPage(" + i + ")\" longdesc='" + i + "'>" + (i) + "</a> ";
}
if (number_of_pages > current_page){
navigation_html += "<a class='nextbutton' href=\"javascript:next()\">Next »</a>
<a class='nextbutton' href=\"javascript:last(" + number_of_pages + ");\">Last »</a>";
//navigation_html += "<a class='nextbutton' href=\"javascript:next()\">Next</a>";
}
jQuery("#page_navigation").html(navigation_html);
}
var pageSize = jQuery(".parent-pagination-count").data("count");
showPage = function (page) {
jQuery(".related-pagination").hide();
jQuery('#current_page').val(page);
jQuery(".related-pagination").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
jQuery(this).show();
});
var totalresultcount = jQuery('.related-pagination').length;
if (totalresultcount < pageSize) {
jQuery("#page_navigation").hide();
} else {
makePager(page);
}
}
showPage(1);
next = function () {
new_page = parseInt(jQuery('#current_page').val()) + 1;
showPage(new_page);
}
last = function (number_of_pages) {
new_page = number_of_pages;
jQuery('#current_page').val(new_page);
showPage(new_page);
}
first = function () {
var new_page = "1";
jQuery('#current_page').val(new_page);
showPage(new_page);
}
previous = function () {
new_page = parseInt(jQuery('#current_page').val()) - 1;
jQuery('#current_page').val(new_page);
showPage(new_page);
}
});Note: This is only intended for learning purpose. For large number of list item this is not recommended one as the pagination logic should happen at backend system instead of handling at front-end level.
Thanks everyone and please feel free to comment. See you in next blog with something new.
Happy learning.
