The page you were looking for doesn't exist.

You may have mistyped the address or the page may have moved.

If you are the application owner check the logs for more information.

jQuery Pagination Plugin

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.

About The Author

I'm a 24 year old designer, web designer and web developer. I always liked computers and photography. I first started working on little computer programs and after finishing Informatics and Mathematics at "Gib Mihaescu College" I applied for Informatics at the "University of Craiova" and took my license this year. I"m currently aiming for a Masters Degree in the same field.

40 Comments

  1. CertPal says:

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

  2. 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!

  3. Chocksy says:

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

  4. merlin says:

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

  5. Chocksy says:

    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 :)

  6. 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

  7. Валёк says:

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

  8. Khalil says:

    Nice Tutorial…

    please give us download link

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

  10. please give us download link

  11. Balazs says:

    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.

  12. Chocksy says:

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

  13. Gabriela says:

    Hi,

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

    Thanks

  14. xoozlez says:

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

  15. Chocksy says:

    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.

  16. satyendra says:

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

  17. GaryN says:

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

  18. wXqi says:

    nice job

  19. Mosselman says:

    The callback is called at the wrong place. It was called when the pagination was initialised, however the idea (according to the comments) is that it is called when a page is activated.

  20. Mosselman says:

    To continue my previous post #submit-button-click-fail

    I moved ‘opts.callback(current_page, this)’ from the end of the plugin to just above ‘return continuePropagation’ in the function’pageSelected’.

    If you want to have both a call back for init and pageselect you could create an extra callback instead of moving the current one. But for now this works fine.

    Apart from that thanks for the plugin! It saved me some hours of work as well.

  21. David says:

    Astounding website! Superb aesthetics, features, and info. Took a while but finally found that “stunning sliding door” plugin. Love the affect. Cheers!

  22. Diogo says:

    Great navigation! How can i call event when click on page item? Why in “next link” dont have the pag number in tag? How can i implement?

  23. Greetings,

    I have a inquiry for the webmaster/admin here at blog.ajaxmasters.com.

    Can I use part of the information from your blog post above if I provide a link back to this website?

    Thanks,
    Alex

  24. deecoup says:

    hmm…good work and great plugin useful for some projects

  25. Chocksy says:

    Yes no problem :)

    Thanks

  26. chris says:

    I just made custom pagination on jQuery hope this help you all
    http://bit.ly/free-pagination

  27. Eric says:

    In your demo you’re populating and switching the content that belongs for each tab in a custom function (‘pageselectCallback’ fn) that lives entirely outside the plugin.

    Shouldn’t that belong in the plugin? Isn’t that the whole point of having a plugin for pagination?

    Eric

  28. Eric says:

    Ps. I did want to say that off the 3-4 pagination jQuery plugins I’ve reviewed I like the usability of yours the *best*. And you’ve commented your code much better than the others I’d say.

    I probably didn’t communicate what I wanted to say very well in my last post. For reference take a look at the Pajinate plugin’s usage. With this plugin, you just need to provide some static markup representing all your search results wrapped in a ul tag. Then all you need to do is point the plugin at your wrapper ID/class. The plugin takes care of the rest so you don’t need any other JavaScript to implement to make it all work. It’s dead simple to implement for the user of the plugin. This is the approach I’d recommend taking a look at if you plan to make updates to your plugin.

    Thanks,
    Eric

  29. baa says:

    I am searching to paginate and on click scrollto with easing. is it easily doable with your plugin?
    -
    great plugin!
    thanks

  30. ob1 says:

    Thank you for this plugin !!! Very nice and usefull !!! :)

  31. Tim Abell says:

    Seems to be on github here: https://github.com/gbirke/jquery_pagination/

    The author matches. The one on github is much newer (v2.2) than the one linked from this post (v1.2).

  32. cris says:

    can this be used with data extracted from a database?

  33. VVK says:

    nicely done..

  34. royal says:

    Very nice plugin, but what i want is, not to display the Config form for pagination parameters. Can you send me a code for that, i am new with ajax jquery codes.
    please, thanks.

  35. [...] 6. jQuery Pagination Plugin [...]

  36. [...] 官网:http://blog.ajaxmasters.com/jquery-pagination-plugin/ Demo:http://tutorials.ajaxmasters.com/pagination-demo/ 预览图 [...]

  37. [...] for comment threads, slideshows, or any kind of structured content.jQuery Pagination Plugin – MORE INFO / DEMO (Free)When you have a a large list of items (e.g. search results or news articles), you can [...]