enavu webdevmania tutsvalley psdestination
visit the enavu network
88 Comments Article Title Overlay

jPaginate – jQuery Pagination System Plugin

The latest enavu jQuery plugin brings you instant html pagination allowing you to split series of elements into organized pages.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

We noticed that our original post “Making a jQuery pagination system”received a lot of attention and a couple of people pointed towards some new features and making it into a plugin so we spent the past few days rewriting the code from scratch with some major improvements. Here is a sample implementation of the plugin:

HTML

<div id='content'>
    <p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>
    <p>Pellentesque ac sem ac sem tincidunt euismod.</p>
    <p>2Duis hendrerit purus vitae nibh tincidunt bibendum.</p>
    <p>Nullam in nisi sit amet velit placerat laoreet.</p>
    <p>Nulla sed purus et tellus convallis scelerisque.</p>
    <p>Nam at justo ut ante consectetur faucibus.</p>
    <p>Proin dapibus nisi a quam interdum lobortis.</p>
    <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>
    <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</p>
</div>

JavaScript




CSS

.pagination {list-style:none; margin:0px; padding:0px;}
.pagination li{float:left; margin:3px;}
.pagination li a{   display:block; padding:3px 5px; color:#fff; background-color:#44b0dd; text-decoration:none;}
.pagination li a.active {border:1px solid #000; color:#000; background-color:#fff;}
.pagination li a.inactive {background-color:#eee; color:#777; border:1px solid #ccc;}

That’s it!

Here is what the generated code will look like:

1Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.

Curabitur a ipsum ut elit porttitor egestas non vitae libero.

Pellentesque ac sem ac sem tincidunt euismod.

2Duis hendrerit purus vitae nibh tincidunt bibendum.

Nullam in nisi sit amet velit placerat laoreet.

Nulla sed purus et tellus convallis scelerisque.

Nam at justo ut ante consectetur faucibus.

Proin dapibus nisi a quam interdum lobortis.

Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.

Mauris auctor suscipit tellus, at sodales nisi blandit sed.

And here are the options for the plugin:

items = number of items to have per page on pagination
next = the text you want to have inside the text button
previous = the text you want in the previous button
active = the class you want the active paginaiton link to have
pagination_class = the class of the pagination element that is being generated for you to style
minimize = minimizing will limit the overall number of elements in the pagination links
nav_items = when minimize is set to true you can specify how many items to show
cookies = if you want to use cookies to remember which page the user is on, true by default
position = specify the position of the pagination, possible options: “before”, “after”, or “both” [added in version 0.2]
equal = implements an equal height main element by using the highest possible element use true false [added in version 0.3]
offset = unfortunately calculating heights with javascript isn’t always 100% accurate, so please use this value to make it perfect :) its defaultly set to 50 [added in version 0.3]

to pass them in simply follow the following syntax:

$("#content").jPaginate({items: 4, paginaton_class: "myownclass"});

that’s it, you have on the go pagination system with cookie support!

Related posts:

  1. Making a jQuery pagination system
  2. Equal Column Height with jQuery
  3. Advanced jQuery Placeholder Plugin (cross-browser support)
  4. Making a nice jQuery content scroller with ease.
  5. How To Create a jQuery Plugin

Did you absolutely LOVE this article... share it!

Comments

  • Nice, but it should not jump in respect to text height.

  • Hey alberlau, thanks for the comment but this isn’t something the plugin should handle i believe. All you would need is to apply the correct the correct css properties to your #content div/ul etc. Set a height and it will not jump. It’s showing you the element set from the page selected and those vary and there isn’t much we can do about that. If you have any suggestions let me know!

  • Simple, worked seamlessly – just saved me a lot of time :)

    Gratzi!

  • Thanks Ben! We’re very happy to hear that!

  • mille merci, ça marche parfaitement !
    one thousand thanks, working perfect !

    question : is it possible to get the navigation on top of the div concerned instead of at the bottom ?

  • Thank you so much for the suggestion, i can’t believe i didn’t think of it myself. I have added the feature, please re-download the plugin from above and set the option of position to “before” “after” or “both”. Enjoy!

  • With respect to alberlau’s comment, I agree that if your plugin has some kinda support for doing something like equalheights.

    I agree that it is out of the plugin’s behavior but there is no other way to do it (like using equalheights plugin) since you reuse the same div container for the displaying the paginated lists.

    Is there a way you can iterate through each page and find out the container’s max height it takes during the iterations and set that as the height of the container?

    Just my thoughts, I might be wrong. Please correct me if so.

    Anyways, thanks so much for your effort, it definitely saved some of my time.

  • Okay I have added the feature, please download from above to get latest version. To enable is set property equal to true and then play around with the offset value, its currently set to 50 but i think in different situations you may want to tweak it a tiny bit to make it perfect and account for the design of your website :) hope this is useful to you guys!

  • Nice.. thanks!

  • Glad I could help!

  • how fast ! super thanks, plugin is looking more and more terrific !
    another suggestion i’m thinking about is a drop down menu in case you have 40 pages and you quiclky want to reach page 35 when you’re reading page 8…
    one more suggestion (and i’m done !) is a transition effect (like fade in / fade out) when switching pages…that would look great !
    thanks again for your work and kindness

  • holala, in the spirit of keeping the plugin as small and fast as possible the drop down menu might not make it into the plugin, but the transition effects will definitely make it as i am currently building a series of plugins like a jQuery slider and a carousel which will also need to use custom transitions, so i think im going to build a library and if you get multiple of the plugins they can all share it :)

    and please do not limit yourself as far as features go, let us know of anything you think of! we love ideas ;)

    p.s. stay tuned for the vanity tools which we will be releasing towards the end of the year (jTip, jSlider, jHover, jPlaceholder, jBar, and more!)

  • correcting text
    define four items and has only four items on the page, it activates the arrow before so I made a modification to fix, see below.

    add
    else if (number_of_pages == 1) {
    nav = start + previous_inactive + items + next_inactive + end;
    }
    after
    if (curr != 1 && curr != number_of_pages) {
    nav = start + previous + items + next + end;
    }

    :D

  • Thanks! Good catch, i didn’t account that some people might use pagination with only 1 page, it seems to defeat the point. I’m adding it now and reuploading.

  • How can I implement this method with a table. I put it an id = content to my table but nothing happened.
    It is very very important for me that you can suggest me a solution please.
    Thank you

  • Unfortunately tables have a completely different architecture and there is no easy way of implementing this plugin without completely re-writing it. But i was able to find an amazing solution for you: http://tablesorter.com/docs/ it has a Pagination plugin specifically made for tables :) enjoy!

  • Thank you very much! I’m deeply greatfull with your help. The table is absolutely amazing! but ..I’ve a problem.

    My data is not hardcode, I mean, is not the kinf of Apple. Im using an mvc model with daos, beans servlets etc, so my html have this ${fruits.apple}, which is inside a form and when I print the table, nothing is showed, expect data that has been introduced explicitely. Do you know a way to solve this problem?

  • If the code is generated after page load you will have to call the plugin again after the data loads. So bind with jquery your form submit like so:

    $("form").submit(function(){ $("table").plugin() });

    That should work, and if it doesnt it might be because you need to do it on complete submission of the form so google binding on success of form submit with jquery :)

    Good Luck!!!

  • Wow, the last one sounded like chineese for me, jaja. But I will search for information about binding. Thank you very much again, I really apreciate your kindness. Greetings from Peru.

  • First of all thanks for the great plugin!

    I was wondering what line 107 in the js file does?

    end = ""

    I had to remove the part because it was appending to the bottom of the container.

    Oh yea I second the transition effects!

  • Admin, the issue is not only use a page, but dynamically should occur using a smaller amount of items could get without showing the items by clicking

  • Hello…. great work…!!

    It doesn’t work in google chrome :(

  • That’s rather funny, I am writing this from Chrome and it works perfectly… this is jQuery we are talking about, it works on IE6!

  • I’m sorry i have no idea what you are talking about :(

  • Good work.. I’ve got a doubt though. I have a videos index page where there are lots of thumbnail pictures. I added some jQuery pagination which meant that it takes a lot of time for the pagination to appear since it has to load all those images before loading the pagination. Would your plugin have the same issue? I’m guessing yes, coz that’s how the technology works, but still wanted to pop the question to confirm it.

    The existing pagination is in this link – http://www.esportsindia.com/videos/index.php

  • You should look into Lazy Loading them, or just simple loading them after the pagination loads ( not sure if it will work).

    Try instead of calling the plugin in the $(document).ready just inside of a script tag on top of the page where it’s wrapped in a function like this:

    function runPagi() {
    $(".paginationElemenet").jPaginate();
    }
    runPagi();
    

  • Great Plugin. can you help me getting to display rows for the each div like a windows file explorer. i wanted to display the images fetched form database. any help would be appreciated.

  • I am not sure exactly what you want to do. Please describe in larger detail.

  • Good job. But does it support multiple pagination in single page?

  • Hi guys… great plugin, I think I found a bug, if there aren’t any records to show, the plugin fails.

    I use this to work-around the issue, let me know if is correct, or Im just “fixing” something it should not be “fixed”.

    Line 47:

    var number_of_items = obj.children().size();

    //my code
    if(number_of_items==0){
    number_of_items = 1
    }

    I also like to have some “freedom” to where to place the navigation, and for that I ad the option:
    navclass: “paginate_nav”

    and bloked some lines and use the code:

    /*
    if (options.position == “before”) {
    obj.before(nav);
    } else if (options.position == “after”) {
    obj.after(nav);
    } else {
    obj.after(nav);
    obj.before(nav)
    }
    */

    //my code
    if(number_of_items > 1){
    $(‘.’+options.navclass).html(nav);
    }

    Thank you, all

  • Actually I think this is even better:

    If there are less records than “options.items” don’t show the nav system.

    if(number_of_items > options.items){
    $(‘.’+options.navclass).html(nav);
    }

  • Is there a way to add an anchor so that when you click next/previous or a page number, it jumps to the top of the section?

  • I have some problems with the “before” nav. When I click in the buttons to navigate into my tags (tables in my case) the “before” nav starts to down each time I click in a button (like if a were added each time the navigation menu is clicked).

    -Do you have the same problem?

    -Xerrano, can you put the whole code for the navclass: paginate_nav please?

    Thanks.

  • Hello,

    I’m trying to become an expert on “Experts-exchange” and a question came up about your plugin. The user looking to add a view all feature. I just told them to create a button w/ an id of view all and to do the following:

    $(document).ready(function(){
    $(“#view_all”).click(function(){
    $(“p”).show(“fast”);
    });
    });

    I just figured I’d post this here since it came up.

    cheers,
    Dan

    p.s. cool plugin!

  • Was wondering if you can get this guy to work multiple times on the page….

  • Hey, how can i make an auto rotation. i need an auto next after 10 seconds. thanks for helping me!!! best regards, max

  • Hi, Would it be possible to hide the navigation if the number of items is less than what I have set? i.e. if I have set the plugin to paginate after 10 items but I only have 4 items at the moment.

    I’m using this within a CMS so need to do this dynamically.

    Thanks
    Ashley

  • I have added this to my code:

    if (obj.children().size() < options.items+1 ) {
    $('.pagination').addClass("display");
    }

    The nav will be hidden with a css class if the number of items are less than the number of items you specify per page.

  • Hi,

    You made a nice work with this plugin.

    I am just facing the following situation: on clicking the navigation buttons to go to various pages, the plugin added br elements, which push down on page all the paginated content.

    Thanks,
    Claudius

  • We are about to launch our vanity tools which includes the latest version of the jPagination plugin (you can preview the site here vanity.enavu.com).

    Thanks!

  • Very well done, I really like new release. I also took a liberty of including your script into my hobby site.
    http://www.ajaxified.com/scripts/pagination/ if you don’t mind.

  • Hey ajaxified, not at all we are glad you did! We will be launching vanity.enavu.com which is a full set of plugins in the next day or two! Thanks

  • Very nice, I will list them all, spread through time :)

  • Thanks for this! Question: I’ve changed your demo to include:

    $(“#content”).jPaginate({ minimize: true, nav_items: 0 });

    …and I’m still getting links for 1, 2, and 3. I’m expecting to *only* see previous/next. Am I doing something wrong?

  • One Word. Baddass!
    Thanks guys, this saved me days/weeks of trying to write my own!

  • Checkout vanity.enavu.com for even more life saving plugins!

  • Hello Sir, I have used your old plugin and added view all option to, works great, i was wondering is ti possible to add a cookie to that version so it remembers where the user came from or is it possible to add view all to this version.

    Thanks and love the plugin

  • You will have to go through the plugin to be able to see how the cookie functionality is added and copy it over… or just install the new plugin and add the functionality you added previously?

  • Ok thanks, can you please tell me how to change the cookie expiration, currently its set at 999, i dont want that long, just want it remember the as long as the user is on the site or closes the brower window

  • Hi,

    great job, thanks a lot!
    However, I was wondering how it worked if i wanted to do multiple paginations on the same page?

    Cheers!

    Elsa

  • This was asked before however I did not see an answer so here goes again.

    Is it possible to make the anchors (page, next, previous) jump to the top of the section?

  • Hi, I keep on encountering this issue when I run the plugin: array_of_elements[page] is undefined, which has to do with array_of_elements[page].show(); on line 96. You can see an example here : http://jsfiddle.net/c4qK7/

    The results can be reproduced by clicking on Constitution and then click on About, and finally hitting page 3. Do you happen to know how to resolve this?

    Thank you for any help,
    Aaron

  • I think it has something to do with the live instantiation of the plugin, not sure what to tell you.

  • Great job, thanks for this

  • Thanks for this plugin.

    However, when I change the demo to call:

    $(“#content”).jPaginate({ position: “both” });
    and then click on any page, the whole section shifts down one line. Any idea how to fix this?

    Thanks!

  • I am assuming this has something to do with the equal height option. Are you using it right now?

  • Yes, my defaults are set as follows:

    var defaults = {
    items: 4,
    next: “Next”,
    previous: “Previous”,
    active: “active”,
    pagination_class: “pagination”,
    minimize: true,
    nav_items: 0,
    cookies: false,
    position: “both”,
    equal: true,
    offset: 50
    };

    Other strange things happening are that even though ‘minimize’ is set to true and nav_items is 0 (or 1 or 2….) – all the pages numbers are appearing. It is as if the minimize option is being ignored. Again, this is on the demo html/js I have downloaded and modified with the above options.

  • Re previous comment, I can see that the height it equal between the pages.

    Have tried it on IE 8 and FF 4.0.1 – the behaviour is identical.

  • Hi. Thanks for a great plugin.

    Is it possible to use it multiple times (on different divs) on the same page??

  • Great Plugin. I appreciate your effort on putting this. For those who want to use the same plugin for html tables, you can still use the same plugin without any changes instead your html table must use class instead of id.

    here is a snippet.

    ……

    And in the script use your class as follows
    $(“.iterateresults”).jPaginate();

    And as mentioned above in the article specify the item numbers as the parameter to the constructor jPaginate to have those number of results per page.

    hope this helps.

  • Thanks for your input hk! I appreciate it.

  • oops… the html code didn’t show up in my previous post. :) any specific way to paste on this page??

  • The html snippet missed in my previous comment:


    <table><thead>...</thead>
    <tbody class="iterateresults">
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    -----
    </tbody>
    </table>

  • Great script and very light ! Perfect !
    But is there a way to center the pagination links ?

  • Great plugin. Thank you very much.
    I have the answer for Dipens “However, when I change the demo to call:
    $(“#content”).jPaginate({ position: “both” });
    and then click on any page, the whole section shifts down one line. Any idea how to fix this?”

    In order to delete that line, you have to delete the br on line 108: end = “”
    that’s because remove() is only applied to the ul, so the br stays.

  • @Aaron,
    Don’t know if it’s still relevant, but I also encountered the problem you describe. In my case, it was due to the cookie holding a value for a page number that was greater than was possible for the list number/page configuration that I was working on when the problem occurred. (The cookie’s value had been set previously when I was testing the plugin on a different list on the same page). Deleting the cookie solved the problem.
    Cheers/Bruce

  • Just to save someone else’s time. You can’t minify the js code unless you add the missing semicolons at lines 107, 113, 207

  • how to capture the ‘this.id’ when clicked?
    example:
    $(“#page”).load(“adm/data.php?page=” + this.id);

    thanks

  • you are trying to make the pagination use ajax :) which is not really supported by the plugin.

    let’s see… this.id would refer to the id of the currently opened page from the pagination i assume. So how would we get that… should be here:

    array_of_elements[page]

    replace the page with the current page number and it shold work ;)

  • Hello,

    Is there a way to make it say “Page 1 of 5″ or something similar?

    Thanks!

  • God bless the multiple instances!

  • Worked like a charm. It’s rare to find a plugin that works precisely as needed since almost all web apps are custom jobs anyway.

    Thanks folks.

  • Hi, I modified your plugin to be used with the tables and I put the various classes to be used with Twitter Bootstrap Components Pagination
    Visit my page
    http://checkmates.altervista.org/jpaginatetable/

  • Nice work Mario!

  • Hi,
    In Your example you have specified paragraph tag inside .instead of that is it possible to specify the pages using tag

  • The minimize option is not working properly even if it is set to true also all the page numbers are getting displayed. Is there any fix available for this??

  • For those who are looking to use this for more than one area on the page – you’ll need to add an ‘id’ property to the defaults object. The current selectors are global and so act on all found elements. Adding an ID will localise the jquery selection.

    In your defaults:
    … offset: 50,
    id: “pag” } …

    Then change the selectors at the bottom that read:

    $(“.goto”).live(“click”, function(e) {

    to

    $(“#”+options.id).find(“.goto”).live(“click”, function(e) {

    …you’ll have to do that for all three “.goto”, “.goto_next” and “.goto_previous”

    you can then call jPaginate like so jQuery(‘#parentElement’).jPaginate({ id:”newID” });

  • Thx :-)

  • @Aron, enable cookie to true and this error will stop showing…. — >array_of_elements[page].show()

    thanks

  • .live() is deprecated. If you plan to maintain the code, it needs to be replaced.

  • This looks great.
    But, the pagination is not working when the contents of the paging are loaded dynamically. I tried to call .jPaginate after the contents to be paged are loaded. But no luck. Any help would be appreciated.

  • I am fetching records through mysql and showing them in table format through . not possible to add div to take an ID. any suggetion ?

  • Is there a way this can work with an HTML Table?

  • Hi,I have used the jPaginate plugin without any modifications in it.I am not able to make out as to why i am getting the entire search result set in each of the pages,even though pagination is done only on the items as mentioned in the plugin.Please do reply………..Its an urgent requirement.

  • I found a way to make .jPaginate scroll to the top of the page!

    Ad this line:
    $(‘html, body’).animate({scrollTop:0}, ’slow’);
    under lines 183, 192 and 201 just before the });

  • Hi,

    Great time saver, thank you.

    Note that you have hardcoded the class name at handling click on pagination. If users sets different pagination class name, he’ll get duplicate navigation.

    Thank you :)

  • thanks for the script .. this saves me ! :D

  • this is the first time i actually give feedback under a plugins’ article… i must say, i have never seen such an easy implementation!…

    pure awesomeness

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting