Javascript pagination

Here is some JavaScript code that you can use to quickly implement pagination. Feel free to use, modify and distribute the code.

In order to use this, you need two pieces of information - the number of records and the current page. Once you have this information, call the function below and pass them as parameters. The number of pagination buttons generated will depend on the current page and the count of records. This module uses font awesome for the previous and next arrow buttons and bootstrap classes. Of course, you can use your own classes and icons if you wish.

You would have to set up the click events for the pagination buttons separately.

function paginationButtons(current_page, rec_count) {
    var buttons;
    //prev button
    if(current_page > 1)
         buttons = '<li value="' + (parseInt(current_page) -1) + '"> <a href="#"><i class="fa fa-chevron-left" aria-hidden="true"> </i></a></li>';
    else
         buttons = '<li class="disabled"><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>';

     var max_buttons = 10;//change this value to increase or decrease number of buttons
     var pages_needed = Math.ceil(rec_count/max_buttons);

     //determine the start and end pagination number
    start = current_page;
     for(i = current_page; i >= (current_page - 7); i--) {
         if (i > 0)
             start = i;
    }
     end = current_page;
     for(i = start; i < (start + 10); i++) {
         if(i <= pages_needed)
             end = i;
    }

     if(end-start < 10)
         start = end - 9;
     if(start < 0)
         start = 1;

     for(i=start; i <= end; i++) {
         if(i == current_page)
             buttons += '<li value="' + i + '" class="active"><a href="#">' + i +'</a></li>';
         else
             buttons += '<li value="' + i + '"><a href="#">' + i + '</a></li>';
    }

     if(current_page < end)
         buttons += '<li value="' + (parseInt(current_page) + 1) + '"><a href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>';
     else
         buttons += '<li class="disabled"><a href="#"> <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>';

     //pageButtons is a unordered list(ul) on the page
     //<ul id="pageButtons" style="color:#fff"></ul>

     //put the list items in the list
     document.getElementById('pageButtons').innerHTML = buttons;

     //ensure to set click events for the buttons
}

//setting click events example:
function setPaginateClicks() {
    //using jquery
     $("#pageButtons li").click(function(){
         if(!$(this).hasClass('active')) {
             //put your code for the click event here
        }
}
SiteLock