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 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 […]

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

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.

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.

Tagged with:

cody

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

http://tympanus.net/codrops/author/cody/

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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.

  4. 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]

  5. $(“#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

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

  7. Cool script! Thanks.

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

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

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

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

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

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

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