jQuery Pagination Plugin

Created on September 22nd, 2009 by Chocksy in Tutorial
jQuery pagination

jQuery pagination

Description

When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This plugin creates these navigational elements.

Usage

Include the pagination plugin script and the pagination.css file in your HTML page. In your HTML body create a container tag pair that will hold the link elements. Give it an id attribute (e.g. “News-Pagination”)

After you have loaded the contents and know how many items you want to display overall, create the pagination like this:

	// First Parameter: number of items
	// Second Parameter: options object
	$("#News-Pagination").pagination(122, {
		items_per_page:20,
		callback:loadContents
	});

This will create the navigation links inside the container. You will see the numbers 1-7, the first number is highlighted. When you click on another number, the highlighting changes and your callback function “loadContents” is called.

The plugin is highly configurable through the option parameter and all elements can be styled separately.

You can check out a demo here.
And download the source code here.

Tags: , , ,

 
 
20 Comments
    September 29, 2009

    Very nicely done. I like the way the numbers change as you move towards the next pages.


    September 30, 2009

    Have you given any thoughts to Multiple databases in Single application? I’ve been hard pressed to find good resources, and judging from this article I’m guessing you may have something valuable to say. Thanks in advance!


    September 30, 2009

    We will try and post something on multiple databases in single applications too. Thanks for the good idea!


    merlin
    October 12, 2009

    Your web design is the best! Really like the image roll over effect too. Are you guys giving out any templates for free :)


    October 12, 2009

    Hmm good idea. I think we might consider working on some WP templates for free. Thanks for the suggestion and I’m glad you like the design :)


    January 18, 2010

    i tried to use your plugin, but there is a problem. a couple of people filed the same issue as a bug on the jquery website. On demo.htm, changing items_per_page to any value besides “1″ causes the number of items shown on the page to remain at 1 but the number of pages to be reduced. is there a solution? thanks


    Валёк
    February 7, 2010

    there’s some limitation, if i set pagination links to show less then 4, it stops on first 3 pages..


    Khalil
    February 13, 2010

    Nice Tutorial…

    please give us download link


    April 20, 2010

    oh good thing i find this 1 day. thank you very much


    April 20, 2010

    please give us download link


    April 20, 2010

    You can get the download link from here: http://tutorials.ajaxmasters.com/pagination-demo/


    Balazs
    May 20, 2010

    Nice script – have you considered using a cookie to remember what page you were on? That way if your list contains a list of links, and a user is on page 12, and clicks on a link, then clicks back, it remembers he/she was on page 12.


    May 20, 2010

    Yeah that sounds good. We can either use cookies or # in the address but that would make problems for IE. Thanks for the suggestion!


    Gabriela
    June 21, 2010

    Hi,

    If I set Number of pagination links shown = 3, from the second page it shows 4 links, how can i fixed?

    Thanks


    July 4, 2010

    good jobs


    xoozlez
    August 23, 2010

    hey guys.. is there anyway i can centralise the pagination?


    August 23, 2010

    Well the pagination appears in a div. You set to that div a fixed width and then put margin: 0 auto and it should be centralized. You can see more in the demo and download that and play with it.


    satyendra
    September 22, 2010

    awesome, just saved me several hours of programming, couldn’t be easier to install and use. Tons of thanks.


    GaryN
    September 25, 2010

    Very Very nice plugin! Thanks for posting such awesome tutorial.


    wXqi
    October 22, 2010

    nice job