jPaginate: A Fancy jQuery Pagination Plugin

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the […]

By cody in Playground on
Demo Download

jPaginate

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
You can call the plugin in the following way:

$(elementID).paginate()

You can configure the plugin with the following properties:

  1. count: The total number of pages
  2. start: With which number the visible pages should start
  3. display: How many page numbers should be visible
  4. border: If there should be a border (true/false)
  5. border_color: Color of the border
  6. text_color: Color of the text/numbers
  7. background_color: Background color
  8. border_hover_color: Border color when hovering
  9. text_hover_color: Text color when hovering
  10. background_hover_color: Background color when hovering
  11. images: If the arrows should be images or not (true/false)
  12. mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
  13. onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Message from TestkingLearn the basics of jquery using sun tutorials. Download SY0-201 dumps to learn how to create jQuery plugins and pass your ccnp exams on first attempt.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Dynamic Tooltip Reveal Animations

How to Create an Organic Text Distortion Effect with Infinite Scrolling

Alternate Column Scroll Animation

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 121

Comments are closed.

  1. Pingback: uberVU - social comments

  2. Pingback: jPaginate: A Fancy jQuery Pagination Plugin | Codrops « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  3. Pingback: jPaginate - interessante “Pagination”-Variante mit jQuery | tagdocs.de

    • Hi,
      I am not sure if I understood your question, but you don’t need to update the count since the onchange just makes the current page to change.

  8. i got another problem: pager cannot display correctly.
    i.e.

    … any elements…..

    …

    $(“#pager”).paginate(myOpt);

    There are some classes in the wrapper div of pager, which cause pager cannot display correctly. the pager displays vertically (i dont know which css style, but it dose happen in my case ).
    i am not sure if it’s jPaginate css problem?
    something like:
    [first][last]
    [1]
    [2]
    …
    [100]

  9. $(“#demo1”).paginate({
    count : 7351,
    start : 1,
    display : 8,
    ……..

    hi,i got a problem like front code,i think it`s a bug

    try run the code with count>=7351

  10. Pingback: ??????? » [Web] ????

  12. Cool script! Thanks.

    gembin, what do you mean programmatically ? The page is being updated when you click on it ?

  13. yes, the page(div exactly which contains jPaginate) is created dynamically when i click on it.

  15. Looks like bumping out the inside width by 5px or so fixes the issue:

    insidewidth = 5; (before the loop figures out how large it needs to be).

    this is on Firefox 3.5.5 on OS X 10.6.2

    Thanks again for a great plugin.

    • Thanks Matt!
      I see that happens because of the font-weight of the current page. I will try to solve it. For now I just put the same font-weight for all the pages and it seems to works fine.
      greetings

  16. I’m experimenting with your script for my site http://goldlilys.110mb.com/Goldlilys/anime.html and it seems to only work correctly when there’s only one instance of it on a page.

    For some reason, the controls doesn’t calculate the width correctly for the rest. When I use firebug, the 2nd pagination doesn’t display the width factor and hence the pages are vertically aligned instead of next to each other.

    Other than this bug, it’s a great plugin.

  18. Hi,
    I am seeing that there’s a problem calculating the values for paddings and widths. I am not sure what can be wrong. I would say you have some conflit with your other scripts. As you can see in this demo page you can call several instances of the jPaginate and all of them work, so I wouldn’t say that is the problem.
    If there’s some conflit with your scripts, I would say it’s with the script that makes the tabs show/hide. Just try if you can, to make the first 2 tabs (currently watching and action/adventure) be expanded by default and see if it works. if that’s the case, then you shouuld maybe call the paginate each time you expand a tab. I am not sure though…
    greetings!

  19. Figured there’s something wrong with jQuery UI accordion. Thanks for helping and good job on this plugin. Will be using it once I figure out the problem.

  20. First off – thanks for the great plugin! I’ve a encountered a display issue in all major browsers. If in the decleration of the plugin I, for example, assign 1 to ‘count’, and 15 to ‘display’, the link ‘Last’ moves over to the left (should be right of course) and overlaps the link ‘First’, resulting in an illegable mess. This applies if ‘count’ is less than ‘display’ by any amount.

    • Hi, thanks!
      Well, why would you do such a thing? 🙂 You know that “count” needs to be bigger or the same value as “display”. Anyway I changed it and uploaded the new version in order to avoid that situation.
      greetings

  21. It’s set like that because the ‘count’ property is populated dynamically via an Ajax request, whilst the ‘display’ property remains static at 15. At the moment there aren’t many records, and thus not many pages (1 to be exact). Anyway, thanks for the fix, it’s working as intended.

  24. Hey thanks so much for this script. It works fine now … at least as much as I want it to (there is still that IE problem as you can see here >> http://goldlilys.110mb.com/anime.html) Haha but just hoping that people will stop using IE and use Firefox or Chrome instead. Anyways, WONDERFUL JOB!!

  25. Hi,
    I am appliying pagination for the diffrent tab,for first tab it work great but for other tab pagination display vertical.I think goldlilys was facing the same problem.Please let me know the resolution as it is critical

  26. @deepak:

    There is nothing wrong with cody’s script. If you’re using jQuery UI tabs or accordion, there is something wrong when you have links (a tags) inside it. When you add this pagination script, its recognized as part of the accordion or tabs section and messes with the aligning.

    My solution is to NOT use jQuery UI with this script at all. I’m sure you can find another way to do tabs.

  27. Pingback: 20 Plugins para jQuery | Renan Lima

  29. Pingback: Stephan Sokolow’s Blog » SQL Pagination Without OFFSET

  31. Pingback: jQuery plugins for forms | WebDesignExpert.Me

  32. Hi,

    How could be this one used with PHP+MySQL? I mean, how should I modify

    onChange : function(page){
    $(‘._current’,’#paginationdemo’).removeClass(‘_current’).hide();
    $(‘#p’+page).addClass(‘_current’).show();
    }

    to make a call to my php page which loads the data?

    Thanks for this one! It’s really nice

  33. Hello, Buddies!

    I am also confused, will anybody help us how can we use it with PHP + MYSQL?

    Thank you.

  34. IE8 wraps the last number onto another line. This can be seen in Demo 1 and Demo 2. The issue appears whether or not you’re in compatibility mode.

  35. To fix the IE8 issue that causes the last number to wrap, change the line at the bottom of jquery.paginate.js from:

    _ul.css(‘width’,insidewidth+’px’);

    to:

    if(ver == ‘ie7’) _ul.css(‘width’,insidewidth+8+’px’);
    else _ul.css(‘width’,insidewidth+’px’);

    Note that you may have to tweak the 8 depending on your stylesheet.

  36. Is there any way I could use existing markup for this plugin? I’m aiming at using it for a horizontal calendar type of thing, with clickable days, and I must have a fallback where the links work without JS.

  38. This plugin is great.. however how many times will you really have a static page count?! Is there a way to set the ‘Count’ property dynamically (on page load)?

  39. Any way to add a “timer” to this plugin? I’d like the elements to auto-rotate on a timed basis?

  42. I would like some information or tutorial on how to use this plugin with a result set from a PHP MySQL interaction.
    Thanks!

  43. Thanks for the amazing script!

    Does anybody know if there is a way to display two copies of the pagination links (one above the content, and one below)?

    I know you can just change “div id=” to “div class=”, which will allow you to place multiple copies on the page. *However*, doing that won’t cause them to update each other.

    In other words, if you click “page 2” on the top copy of the pagination links, how do you get the bottom copy to update itself (instead of remaining on the last number clicked by that particular copy)?

    Thanks for any help!

  44. I had just used your jpaginate script but I want to keep two pagination like demo 5 but it doesnot work I had copied demo 5 and make it into demo 6

    Demo 6
    Page 1
    Page 2
    Page 3
    Page 4
    Page 5
    Page 6
    Page 7
    Page 8
    Page 9
    Page 10

    $(“#demo6”).paginate({
    count : 10,
    start : 1,
    display : 7,
    border : true,
    border_color : ‘#fff’,
    text_color : ‘#fff’,
    background_color : ‘black’,
    border_hover_color : ‘#ccc’,
    text_hover_color : ‘#000’,
    background_hover_color : ‘#fff’,
    images : false,
    mouse : ‘press’,
    onChange : function(page){
    $(‘._current’,’#paginationdemo’).removeClass(‘_current’).hide();
    $(‘#p’+page).addClass(‘_current’).show();
    }
    });

    But it doesnot work can any one help why it getting problem do I need to change on any other place too

  45. you can actually pass vars from php into the script so like count could change and you can query the information to fit inside the pages…

  46. Does any one know how to show 2 Pagination {demo 6} on same page . I had tried but doesnot function well. Please help if any one know

  50. Yes i got it to totally work with php and mysql having some css issues with the numbers div at the bottom but other than that it completely works fully just need to have things line up better on the bottom… could be something i have going on in the other css i have on the site conflicting with it …