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: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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.

Feedback 121

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

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

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

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

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

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

  7. for those of you wondering about the count and changing it dynamically with php based on number of records in database

    $(function() {
    $(“#demo5”).paginate({
    ,
    start : 1,
    display : 7,
    border : false,
    text_color : ‘#FFB442’,…..
    }
    });
    });

  8. sry

    $(function() {
    $(“#demo5”).paginate({
    /*php*/ print “count:$maxPage”; /*end php?*/,
    start : 1,
    display : 7,
    border : false,
    text_color : ‘#FFB442’,

  9. @ebaretta, your solution is a little great but, what if I have the JS in an outside script included ?? And better yet; I’m withing a template Engine, so I can’t [And I don’t want to] make any echo nor print inside my HTML templates … Any other idea to fill the ‘count’ value ?? Anyone else ?? I read around making a callback, but as far as I know that would be resulting in making the DDBB query twice, one for the results display, and another for grabbing the total rows …

  10. I did the callback to set the ‘count’ value but doesn’t seems to work. I have this:

    count: function(){
    $.get(“myScript.php”, function(r){
    return r;
    });
    }

    Any help ?? Thanks

  11. Hi Everyone,

    Let me first say, what a great plugin to work with. However the documentation is hard to find and I had to spend a whole day trying to figure out how to run this with php.

    I am posting what I did for everyone’s benefit:

    Scenario:

    I have a simple php page with a page no parameter passed via query string.

    lets say it is like this test.php?page=1

    First I would put php code to set start parameter from static to dynamic like start :

    Now I fetch the querystring parameter via decodeURI(location.search).

    I add a simple redirect function at the end of this line

    $(‘#p’+page).addClass(‘_current’).show();
    submitForm(url);

    This function simple has a location.href(url) call.

    If you still have problems in running this excellent plug in please drop me a message at umair.pervez at gmail.com

    Thanks.

  12. Since I’m enjoying using this plugin I would like to contribute with a small snippet.
    Besides other changes I’ve made there’s one that might be useful to others.
    First and Last links are initiated even if page is first or last. To avoid unnecessary ajax calls I’ve added 2 lines:
    _first.click(function(e){
    if($(‘/../../ul.jPag-pages li:first span’,this).length>0)return;

    and

    _last.click(function(e){
    if($(‘/../../ul.jPag-pages li:last span’,this).length>0)return;

    It’s using relative paths so it wont conflict if you have more than one pagination on same page.

  13. I’ve found a small bug in the css of the plugin. On the javascript, you create the pages inside a div, but it is not styled on the css file, and if someone places a default css for the divs of the page (for example margin-left:auto and margin right:auto), the pages appear broken. So you should add this to the css file of the component:

    .jPaginate div{
    margin:0px;
    }

    Another thing i found is missing is the ability to set a custom “first” and “last” label values, so we can show the pager in other languages.

    Great component by the way!!