sendesignz

How to Paginating a Table Using jQuery

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 using jQuery.

See the Demo

We will start with markup

HTML

Roll Name Course Marks
101 John Information Systems Programming 87
102 Naman Information Systems Development 90
103 Chirag Contemporary Issues in Information Technology 85
104 John Information Systems Development 87
105 Naman Contemporary Issues in Information Technology 90
106 Chirag
Information Systems Programming 85
107 John Contemporary Issues in Information Technology 87
108 Naman Contemporary Issues in Information Technology 90
109 Chirag Information Systems Programming 85
110 John Information Systems Development 87
111 Naman Contemporary Issues in Information Technology 90
112 Chirag Information Systems Development 85

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

CSS3 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>
Above code we can place end of <tittle> tag.

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(); } }); }); 
Above jQuery code start with counting the number of rows (tr elements nested inside the tbody element) and storing the count in variable rows.

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.

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation

Load Previous Comments
  • Guest (alper)

    You are the best, man!!! I have been looking for paging for days. All were shit. Only you did help me

    0 Like Short URL:
  • Guest (vamsi)

    here in this code everything is perfect but if we want a boxes for the pagenation of no that is <br /><br /><br />1 2 3 4 5 Next <br /><br /><br />this numbers should be in the boxes then what is the code for this do reply me and where we need to add that code.....

    0 Like Short URL:
  • Guest (ben)

    gracias me salvastes la vida! :D

    0 Like Short URL:
  • Guest (asphiroth)

    how to make the pagination number bold when it is on the current page?

    3 Like Short URL:
  • Nice one, thanks a lot sir.

    0 Like Short URL:
  • Guest (Swarnajith)

    if the table is dynamically update such as added rows and deleted rows, how do we update the script to display updated data etc

    2 Like Short URL:
  • Guest (Manuel Sánchez)

    The only "problem" I have found is in lines 20 to 24:<br /><br />20. var tr=$('table tbody tr');<br />21. for(var i=0;i&lt;=no_rec_per_page-1;i++)<br />22. {<br />23. $(tr[i]).show();<br />24. }<br /><br />In case your table has less rows than the number of rows per page it shows an error.<br /><br />I have changed those lines for these ones:<br /><br />20. var tr=$('#'+tableId+' tbody tr');<br />21. for(var i=0; i&lt;no_rec_per_page && i&lt;tr.length; i++)<br />22. {<br />23. $(tr[i]).show();<br />24. }<br /><br />Everything works perfect now.<br /><br />Thanks again!

    1 Like Short URL:
  • Guest (Manuel Sánchez)

    The only "problem" I have found is in lines 20 to 24:<br /><br />var tr=$('table tbody tr');<br />for(var i=0;i

    2 Like Short URL:
  • Guest (Manuel Sánchez)

    ¡Great article! It works perfectly and it is very smooth.<br /><br />Thanks for the info.

    3 Like Short URL:
  • Guest (fabio)

    It does the job very wel!!!!!<br /><br />Thank you!

    2 Like Short URL: