Delphinidin

Pagination involves breaking up content into manageable page-sized pieces. On the Web, pagination is everywhere; like pagination on the Google search results page. Pagination helps to limit the number of results shown at one time to make it easier for users to navigate and digest the content delivered to them.

Pagination is frequently set up using server-side programming languages like PHP, ASP.NET, and Java. The major benefit to using a server-side solution is the Web page doesn't need to load all of the records at once; they are loaded only when the user requests them. You can use jQuery to set up pagination, but I recommend doing it to paginate only results that aren't heavy-loading (where there are more than 100 results), which could weigh the page loading time down considerably. If your skills are advanced enough, you can build jQuery that loads only 10 results and, each time a page is clicked, that content is loaded via Ajax and inserted into the current page.

In the following pagination example, I explain how you can paginate a collection of table rows with just a few lines of jQuery. The script automatically paginates the records that you pass into the selectors and also creates a navigation menu underneath that shows all of the pages available. When you click on a page, the page number stays active to let the user know which page they are on.

1. Before you can add pagination, you need some data to paginate. In this example, I use a table, but you could use anything from an unordered list to a group of divs.

2. Using the table ID #data, create a selector statement that inserts a div with an ID #nav after the #data element on the page, which will show up underneath the table. The #nav element is used to hold the page number links.

$('#data').after('<div id="nav"></div>');

3. Set up a variable called rowsShown, which holds the value for how many rows you want to show on each page.

var rowsShown = 4;

4. Set up a variable called rowsTotal, which gets the number of the rows in the element that you will be paginating. The #data element is selected and the length property is added to the end.

var rowsTotal = $('#data tr').length;

5. Set up a variable called numPages, which will be equal to the value of rowsTotal divided by rowsShown. Notice that the equation is wrapped by the Math.round native JavaScript method. Math.round rounds the product of the equation to the nearest number.

var numPages = Math.round(rowsTotal/rowsShown);

In any of the tutorials, when you create a variable, if you would like to quickly see that the variable is returning a number, insert an alert statement with the variable inside of the parenthesis, like this: alert(rowsTotal). This doesn't just relate to jQuery, but is a native JavaScript function that is central to all JS debugging.

6. Set up a for loop to iterate through the number of pages and create page number links that are used to navigate through the pages. Add a variable called pageNum; the value is set to the i + 1, i being the iteration variable in the loop. This ensures that the page number starts at 1 instead of 0. Next, add a selector statement to the for loop that selects the #nav element and adds an anchor link with the rel tag set to the index. The page number is set to the pageNum value.

for(i = 0;i<numPages;i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}

7. Add a statement to hide of all of visible rows in the #data table.

$('#data tr').hide();

8. Add a statement that selects the first row and shows it.

$('#data tr:first').show();

9. Add a statement that selects all of the rows in the #data table and use the slice jQuery method to limit only first four rows to be shown. The slice method allows you to pass two parameters (start and end) to slice out a section of an array.

$('#data tr').slice(0, rowsShown).show();

10. Add a statement that selects the first page number and adds a class, active, to it. This ensures that the first page anchor link is selected when the page loads.

$('#nav a:first').addClass('active');

11. Attach a click event to all of the page number links in the #nav element. This click event is used to control the pagination; this event contains the guts of the script.

$('#nav a').bind('click', function(){
});

12. The first statement that is added to the click event removes the active class from whichever link is currently active.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
});

13. The next statement adds only the active class to the page number link that has been clicked.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
});

14. Add a variable called currPage, which stores the value of the rel tag that was set up in the for loop.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
});

15. Add a variable named startItem, which stores the product of currPage multiplied by rowsShown.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
});

16. Add a variable named endItem that stores the product of startItem plus rowsShown.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
});

17. The final statement that is added to the click event controls which records are shown when a particular page anchor tag is clicked. Using a selector, grab all the table rows within the #data table.

$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});