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. Hi there! Thanks for this wonderful script.
    I have a quick question for you…, How do I load my data thourough a PHP script. I have a php script that spits an ID & Name of some students. My question is how do I use this plug-in along with my script.

    Thanks,

    Nat

  2. That is a great pluggin! Thanx!

    But problem is that if the number of pages are BIG, it is slow :-((( I have 292 pages (2920 records) and the pagination draws all of them and hides them for it to work I guess. Problem is 292 lists is sloooww ;-(

    Any chance to implement a better way for many pages?

    Or history support maybe?

    Yours

    Jerry

  3. Hope this will help 🙂

    $(function() {

    $(“#pager”).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){

    location = $(‘#id’+page).find(‘a’).attr(‘href’);

    }
    });
    });




  4. Wanted to add that you have to echo in php links wrapped in div with id=id1 where 1 is the number of page. These divs have to have style display none.

  5. hi
    i tried to install and recalll $(elementID).paginate()
    in joomla but it didn’t work
    any ideas?

    regards

  6. Hi, Thanks for the great plugin! But I have an issue. When I try to center align the div that contains the pagination, the markup gets messed up. Tried wrapping it with another div and center aligning that div, same problem. At last used a center aligned table and placed the div inside that, this time it worked. But another issue arose when the number of pages are less then 3. Again the markup gets messed up. Can you please provide a solution to this?

  7. @Shoeb ,
    I ran into this same problem and finally figured it out.

    The trick is to add one line of code to the applystyle function:
    $this.css(‘width’, outsidewidth_tmp +’px’);
    Then in your stylesheet, set margin:0 auto; on the element you are creating the pagination on.

    So for clarity, here’s what the changes look like:
    $.fn.applystyle = function(o,obj,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright){

    obj.find(‘a’).css(a_css);

    obj.find(‘span.jPag-current’).css(hover_css);

    obj.find(‘a’).hover(

    function(){

    $(this).css(hover_css);

    },

    function(){

    $(this).css(a_css);

    }

    );

    obj.css(‘padding-left’,_first.parent().width() + 5 +’px’);

    insidewidth = 0;

    obj.find(‘li’).each(function(i,n){

    if(i == (o.display-1)){

    outsidewidth_tmp = this.offsetLeft + this.offsetWidth ;

    }

    insidewidth += this.offsetWidth;

    })

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

    }

    I haven’t tested it much, so I’m not sure if it’s consistent across browsers, but worked in Firefox just fine. Hope that helps someone else.

  8. I think that would be helpful

    $(function() {
    $(“#demo1”).paginate({
    count : ,
    start : ,
    display : 16,
    border : false,
    text_color : ‘#888’,
    background_color : ‘#EEE’,
    text_hover_color : ‘black’,
    background_hover_color : ‘#CFCFCF’,
    mouse : ‘press’,
    onChange : function(page){
    location = ‘list.php?page_no=’+page;

    }
    });
    });

  9. had changed the script and implement it to my need. jpaginate edit, add a link and dclare an ajax function to show me pictures of 5 in 5. I work well when paged, but to click to page 5, 6, 7, 8, removes the link with the function.

    it can help me please. I’ve been all day trying to give solution to my application.

    sorry if my english is not understandable.

  10. Hi I was wondering how can I do to have two instances of the paginator; and have consistency between them. That is, if i change the page number in one, and the page actually changes; then the other paginator should show that page number selected in the other instead of keeping the old one. Any ideas ?? Maybe in the change callback ?? But don’t know how to identify each one …

  11. I know that part of this paging system is the cool slide effect of the page numbers, but can it be turned off?

    Let’s say there are 15 pages returned, showing 5 at a time. Can it be made that when next arrows are clicked, pages 6-10 are shown, then 11-15 etc.. instead of the constant sliding action? Same for previous, if currently viwing pages 6-10, prev would show pages 1-5

    I don’t mind the sliding, even if it used the sliding effect to show the next or prev 5 pages and stop that’s fine too.

    Any ideas? thanks!!

  12. Hello, I was wondering how i can localize the text of ” First” and “Last ” button ?

    i don’t see properties to configure it .

    Thanks for your help !

  13. Hi,
    Pagination control is very slick and good.

    It is design for Left to Right representation but if we want to represent it in Right to Left notation then
    Is there any option is available to represent same plug in Right to Left notation?

  14. It would be nice if once a page were clicked, all ‘paginators’ were updated to the clicked page. I hacked a way to do it in the onChange function:

    $(‘.jPag-current’).each(function(){
    if($(this).html() != page){
    $(this).parent().siblings().children().each(function(){
    if($(this).html() == page){
    $(this).trigger(‘click’);
    }
    });
    }
    });

  15. @deepak and @goldlilys – the problem is not in jquery UI – it’s in the way the pagination script generates its properties. If it begins as hidden (or display: none) on the page, it will not generate the correct css. Is there a way to force the jPaginate class to regenerate once it is visible?

  16. Look at the demo5 code.
    Now let’s change the parameter ‘start’, for example, let’s use the value 4.
    Let’s run the page.

    The script tells us, that page 4 is selected, but it still displays page 1.

    Do you have an idea how to fix this bug?