sendesignz

Pagination seems like a server side solution if you have a huge number of data , it is allows the user to browse through the rows in a database table. Lets say you have small amount of data you need to do pagination. Then it will be good idea if you go for client site solution. In this tutorial I will show you how to paginating a table in jQuery.

See the Demo

We will start with markup

HTML

<table border="0" cellpadding="5" cellspacing="1">
<thead>
<tr><th>Roll</th><th>Name</th><th>Course</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td>101</td>
<td>John</td>
<td>Information Systems Programming</td>
<td>87</td></tr>
<tr><td>102</td>
<td>Naman</td>
<td>Information Systems Development</td>
<td>90</td></tr>
<tr><td>103</td>
<td>Chirag</td>
<td>Contemporary Issues in Information Technology</td>
<td>85</td></tr>
<tr><td>104</td>
<td>John</td>
<td>Information Systems Development</td>
<td>87</td></tr>
<tr><td>105</td>
<td>Naman</td>
<td>Contemporary Issues in Information Technology</td>
<td>90</td></tr>
<tr><td>106</td>
<td>Chirag</td>
<td>Information Systems Programming</td>
<td>85</td></tr>
<tr><td>107</td>
<td>John</td>
<td>Contemporary Issues in Information Technology</td>
<td>87</td></tr>
<tr><td>108</td>
<td>Naman</td>
<td>Contemporary Issues in Information Technology</td>
<td>90</td></tr>
<tr><td>109</td>
<td>Chirag</td>
<td>Information Systems Programming</td>
<td>85</td></tr>
<tr><td>110</td>
<td>John</td>
<td>Information Systems Development</td>
<td>87</td></tr>
<tr><td>111</td>
<td>Naman</td>
<td>Contemporary Issues in Information Technology</td>
<td>90</td></tr>
<tr><td>112</td>
<td>Chirag</td>
<td>Information Systems Development</td>
<td>85</td></tr>
</tbody>
</table>

Styling with CSS

I have created the “style.css” file into “css” folder. All our css styling will go to this file

<link href="/css/style.css" rel="stylesheet" type="text/css" />

Above code we can place end of <tittle> tag.

Basic CSS

body{font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#666;}
 
.hover { background-color: #106166; color: #fff; cursor:pointer; }
.page{ margin:5px;}

Zebra Strips

CSS 3 introduces the pseudo-class “nth-child”, which makes it ridiculously simple to do this without javascript.To add Zebra Strips to a table, all you need to do is adding the following pseudo-class.

tbody tr:nth-of-type(even){
background:rgba(179,216,179,0.5);
}
 
tbody tr:nth-of-type(odd){
background:rgba(222,240,222,0.5);
}
thead th{
background:rgba(28,157,162,0.5);
}

• nth-of-type(even) add background color to every even rows likewise odd.
  
  
• thead th is a header.

In my previous tutorial Zebra-striping Tables with CSS3 you can learn more about Zebra-striping.

Javascript

Download the Following
Dowonload jquery-1.4.4.min.js

I have created a "pagination.js" file into “js” folder. All of our jQuery code will go into this javascript file.

<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/pagination.js" type="text/javascript"></script>

The jQuery code to divide the rows of the table in to pages (depending on the number of rows that we want to see per page) and to display the respective rows when a page number is clicked.

We already created the pagination.js. Add the following code into pagination.js file file.

$(document).ready(function() {
var rows=$('table').find('tbody tr').length;
var no_rec_per_page=5;
var no_pages= Math.ceil(rows/no_rec_per_page);
var $pagenumbers=$('<div id="pages"></div>');
for(i=0;i<no_pages;i++)
{
$('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
}
$pagenumbers.insertAfter('table');
$('.page').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('table').find('tbody tr').hide();
var tr=$('table tbody tr');
for(var i=0;i<=no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
$('span').click(function(event){
$('table').find('tbody tr').hide();
for(i=($(this).text()-1)*no_rec_per_page;i<=$(this).text()*no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
});
});

In this example we'll assume that we need to see only 5 rows per page, so we initialize the value of the variable no_rec_per_page equal to 5.

We next have to find out the total number of pages by dividing the total count of the rows by the number of records that we want to see per page. The count of the pages is assigned to the variable no_pages.

The final action to take before we start on the event handlers is to set up the page-number display. We start this by defining a div element of ID pages and assigning it to the variable $pagenumbers.

Inside the for loop, we create a few span elements (equal to the number of pages) that contain the sequence of page numbers 1,2… and the span element is assigned the class name page so that the style properties defined in the class selector page class is automatically applied to all the page numbers.

Finally, all the span elements containing the page numbers are appended to the div element of ID pages.

insertAfter and insertBefore :

To finish the job we insert the div element of ID pages that was stored in the variable $pagenumbers after the table element, which makes the page numbers appear below the table. Likewise if you need to insert the div element before the table element you can use insertBefore which make page number above the table element.

Next the hover() event to the page numbers (span element of the class .pages). In the event handler, and we highlight the page numbers when the mouse pointer moves over them. Conversely, when the mouse pointer moves away from them we remove the style properties of the style rule .hover.

The for loop is added to make the rows of the first page number (depending on the value assigned to the variable no_rec_per_page)

In the click event handler of the page numbers, we hide all the rows of the table. We then display the rows that fall within the clicked page number using the tr array.