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: Elementor, a design oriented WordPress website builder for pros

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. Hi,
    Great script but one thing is missing..
    One should able to call select button from javascript. e.g. If I want to display pagination one top as well as on bottom of page and some body clicking one page no, I have to update other pagination selected button…

    Best Regards,
    Rahul.

  2. I’m having the page wrap display problem in IE9 too. I had it in Firefox too, but then I switched pages and back and it went away and now I can’t get it to do it again. A fix for this would be GREATLY appreciated. I’ll dig into it more tomorrow to see if I can find a workaround. I’m guessing it’s something with padding.

  3. I have a fix for the wrapping page issue in IE9. At least, it works for me and every test case I can think of for my application. I can’t guarantee it will work for everyone.

    Change line 245 of jquery.paginate.js from:
    insidewidth += this.offsetWidth;
    to
    insidewidth += this.offsetWidth + 1;

    Hope that helps someone.

  4. Hello Cody,
    How can i destroy an jPaginate instance?

    Look:

    $(#div).paginate(“destroy”);

    Is this correct?

    Ingrid Brandão

  5. Great work, Thank you very much
    But
    If the direction from right to left does not work.

    “CSS code” Example:
    direction: rtl;

    Especially those who use the Arabic language
    I wish to clarify that

    Thank you

  6. Fantastic plugin. Really really helpful.

    I do however have a question… One of my scripts allows for AJAX based filtering of results so, as a user is browsing, they can easily add price ranges or the like.

    Problem is this can result in changes to the number of pages.

    I have tried reloading the jpaginate query [under a different ID of course] but it does not load unless the entire page is refreshed. Does anyone know of a way to update the page counts and reset the current page based on other changes to the page?

    I am using json to pull back the results so I can easily pull in the total number of pages as well.

  7. My problem is related to the first time i am submitting the form using the jquery ajax. If is not submitting the form first time or you can say it is not calling the action first time. second time when i am clicking the same no. it is submitting the form and able to get the approprate result. I am not sure why i am getting this.
    Please help me.

  8. I’ve found a bug and i don’t know how to deal with it.

    When you create a pagination with 3 or less pages the page links’ wrapping breaks

  9. Nice effort – it’s a shame it can’t be centered properly. I tried the workaround posted in the comments and it generally works but not when you dynamically update it with Ajax calls – it breaks after going from 4 pages to 1 page and then back to 4 – the width calculation fails. I also see that all the examples are fully left aligned so I assume it’s tricky to solve.

  10. how can we make the page go to the top?

    clicking from one page to next does not take the page to the top…

    any clues?

    thanks

  11. Hi guys right now am creating a paginated webpage with around 100 products in it. i used demo5 version of this jpaginate to display one product with details in one page. But am having a another HTML file which is bunch of all product list. I need to know when i click some product eg. “product7” its in slide 7(means pagination 7) it has to directly go to that page and i can able to change the pagination if i wanna see other products too. pls guys help me with a script

    (Note. am not using any php or asp with my website am just using HTML and i implemented with this jpaginate)

  12. Thank you for the Fix, Bodie.
    But the better IE-Fix is this:

    Change (~)Line 250 to:
    _ul.css(‘width’,insidewidth + 1 + ‘px’);

    And if you want the pagination with align right-possibility, than add the following at Line 9:
    // Set the width
    var naviWidth = 0;
    $(this).children(‘div’).each(function(i){
    naviWidth += $(this).outerWidth(true);
    });
    $(this).css({‘width’: naviWidth – parseInt($(this).css(‘paddingLeft’).replace(‘px’,”)) + 9 + ‘px’});

    So the width of the pagination will be calculated 🙂

  13. Hi, I have download this plugin & try to install in my joomla website but receive following Error
    “Could not find an XML setup file in the package” is it suitable for joomla 1.5.23?
    can anyone tell me what steps i need to take for pagination in joomla website.

    Thanks & Regards
    Syed

  14. I am trying to do a simple example using the plugin just to see how it works.

    I am seeing that all the page numbers are vertically aligned. I don’t see any property I can set to it to change it orientation to horizontal. Below is the code I am trying to use.

    I am also wondering how to set the inside width for the page numbers. Help would be greatly appreciated. Thanks!

    function loadPagination(){
    $(paginateElement).paginate({count : “52”, start : 1, display: “5” , text_color : “white”, background_color : “black”, border_color : “black”, text_hover_color : “black”, border_hover_color : “black”, background_hover_color : “white”, mouse : “press”});

    }

    HPC Grid Usage Statistics

  15. I love this plugin so much but I use mysql/php to store all of the movie info on my site. I am new to all of this and have been desperately trying to follow along — been researching how to combine php and this plugin for about 15 hours now — and find you are all far more advanced.

    I really need help. I know for the right person it would take just a few minutes to get it working for me.

    Any do-gooders out there?

    Please take a look at my site http://www.bestadventuremovielist.com the navigation is at the bottom and all pages are unlinked because I just can’t figure it out:(

    Please comment back or leave an email!

    Thank you.