Learning jQuery

Paging helps present data in a clean and elegant way and it can also improve the page load time. It helps by dividing extensive data into separate pages so that it can easily fit in the UI. In this post, we'll learn how to add pagination to your HTML table element with the help of jQuery.

CSS

The following CSS classes are used to style page numbers. The focus CSS class will style the page number on focus. The pageNumber class will style the position of the page numbers.

.focus {
  background-color: #ff00ff;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
.pageNumber {
  padding: 2px;
}

jQuery Code

To implement this function, you'll need to get the count of total records and then divide the total count value with the per page records to get the total number of pages. Finally, add the page numbers to a div and attach a click event to the page numbers to display the next set of records.

The following is the outline of this jQuery solution:

• First, get the total number of rows with only TD elements and store in a variable totalRows. Do not include the table header row in this section.
• Declare a variable recordPerPage which defines how many records are to be displayed on a single page. In our example it is set to 5.
• Count the total number of pages by dividing totalRows and recordPerPage and store it in a variable totalPages.
• Create a div element which will hold the page numbers. To get page numbers, run a loop from 1 to totalPages. Within the loop, create a SPAN tag to hold the page numbers and append it to the main div element.  Once the loop is finished, add the div element to the HTML table so that page numbers will be displayed just after the HTML table.
• Add a hover event to pageNumber, to toggle the .focus CSS class.
• By default, we wish to show records of the first page only. So, hide all the rows of the table and run a loop to show only those rows which satisfy the condition recordPerPage – 1.
• Finally, attach a click event to the pageNumber span tag to display the result of clicked page number. This is done by showing only those table rows which satisfy the condition of clicked page number * records per page. For the loop, the starting number would be (clicked page number – 1) * records per page and ending number would be (clicked page number + 1) * records per page. As an example, if page number 3 is clicked, then rows from 11-15 should be visible on the screen.

Here is the complete jQuery code:

$(document).ready(function() { 
    var totalRows = $('#tblData').find('tbody tr:has(td)').length; 
    var recordPerPage = 5; 
    var totalPages = Math.ceil(totalRows / recordPerPage); 
    var $pages = $('<div id="pages"></div>'); 
    for (i = 0; i & lt; totalPages; i++) {  
        $('<span>&nbsp;' + (i + 1) + '</span>').appendTo($pages); 
    }   
    $pages.appendTo('#tblData'); 
    $('.pageNumber').hover(  function() {
        $(this).addClass('focus');
    },   function() {
        $(this).removeClass('focus');
    } ); 
    $('table').find('tbody tr:has(td)').hide(); 
    var tr = $('table tbody tr:has(td)'); 
    for (var i = 0; i & lt; = recordPerPage - 1; i++) {   
        $(tr[i]).show(); 
    } 
    $('span').click(function(event) {  
        $('#tblData').find('tbody tr:has(td)').hide();  
        var nBegin = ($(this).text() - 1) * recordPerPage;  
        var nEnd = $(this).text() * recordPerPage - 1;  
        for (var i = nBegin; i & lt; = nEnd; i++)   {   
            $(tr[i]).show();  
        } 
    });
});

Check out jsFiddle for more pagination examples!

Conclusion

To sum it up, we saw how to add paging to an HTML table element based on configurable options for setting 'number of records per page'. This simple solution adds the paging with ease, based on your design and requirement. Remember, this information can be easily updated at any time!