- Created on Monday, 14 March 2011 07:06
- Written by Terrence
- Hits: 37164
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.
We will start with markup
Styling with CSS
I have created the "style.css" file into "css" folder. All our css styling will go to this file
Above code we can place end of <tittle> tag.
- 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.
Download the Following Dowonload jquery-1.4.4.min.js
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.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.