Pajinate – A jQuery Pagination Plugin

Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, but the time between paginated-page loads is almost nil (up to a reasonable page size of course).

Pajinate – A pagination plugin the whole family can enjoy!

Usage & Configuration

All plugin documentation can now be found on GitHub.

Demo

Multiple implementation demos can be found on this page.

Source Code

The Pajinate source and examples are available here.

Github

If you’re keen to contribute to this project, or perhaps take it in a different direction you can get ahold of the source here:

http://github.com/wesnolte/Pajinate

The demo and source offer several examples demonstrating various ways in which to configure and use Pajinate (including embedding multiple Pajinate elements in a single page).

552 thoughts on “Pajinate – A jQuery Pagination Plugin”

  1. Hi Wes,

    I am nurse by trade (you’d never say) but have been working as a sfdc partner consultant for 5 years now. Most of what I know I was taught by guys like you.. on the net through posts and of course the community forums. So i have only started to learn Apex recently and of course is now trying to make sense of javascript and HTML too.

    Enough of that – how and where would I be able to use this in SFDC if at all?

    Soory for the *dumb* question, but if I dont ask I’ll never know!
    Thanks

    Charly

    Reply
    • Not a silly question at all, I anticipated it but didn’t want to sully the post. This post – as it stands – has nothing to do with Salesforce, and is purely a jQuery plugin I’ve created; although the ideas stems from something I need in Force.com App I’m working on. I’ll do a follow-up post to this which will detail a Salesforce-specific implementation.. that is, if I’m not beaten to it 😉

      How’s the South African appetite for Salesforce at the moment?

      Reply
  2. I’d really like to be able to use this on my company’s intranet site.

    What’s happening on the page is that we’re already paginating the items using another JavaScript function, and I’m just looking to be able to do something with the page numbers so we don’t have 30+page links on the page. As it is, the page isn’t refreshed, and I haven’t been able to find another script that doesn’t deal with changing the page numbers or refreshing the page. (Maybe my Google-fu is weak.)

    Reply
    • Hello 🙂

      You can configure the number of page links that are shown with Pajinate, and the page doesn’t refresh for each new page. Is that what you’re looking for?

      Reply
      • That’s totally what I’m looking for, but I don’t need the part of the code that deals with the content. I just need to deal with the page numbers, because each page link deals with the content. Do you have to specify a content section, or is there a work around for that?

        Thanks! 🙂

        Reply
  3. Hello Wes,

    I love the Pajinate plugin, however is there anyway to adapt it to recognize HTML tables?

    I want to page a long single table full of rows and columns. It doesn’t work if I put it class=”content” in the tag…

    Hope you can help me out!

    Reply
  4. First, fantastic plugin! One thing I’m trying to do is set the items_per_page dynamically based on a click handler. For instance if I have 100 items and want to initially show 20 per page but also allow someone to click a link to View All. Clicking that link would set the options.items_per_page to 100.

    Any ideas how I could accomplish this?

    Reply
    • Sorry for the delayed response, been a little busy 😉 I haven’t had time to build that in just yet (an excellent feature though), so for now you’d need to reload the plugin. You could do this with a click handler on a button, but be careful if your lists are large, there’ll be some latency.

      Reply
  5. This plugin is awesome! Thank you for sharing.
    I was wondering if we can add fading effect to it. Is it possible to make the current page fade out and the next page fade in when clicking the pagination links? I don’t know much about jQuery, so I have no idea if it is possible or not.
    Also, wondering if I can use the plugin in a commercial website.
    Thanks.

    Reply
    • Thanks for the kudos. Fading is indeed possible, just google “jquery transition effects”. jQuery is very easy, so it’ll be simple to add this feature to the plugin. The plugin is publish under the MIT license so you can use it where ever you like. The only real rule is regarding the copyright notice inside the plugin: “The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.”.

      If you look through the comments you’ll see one by TehNrd(Jason). He’s added in a transition effect which – together with the fade transition effect – should help you get started.

      Reply
      • I managed to add the fading effect with the help of Jason’s version. Again thank you for creating such a great plugin.

        Reply
  6. Great plugin. Would there be an easy way to toggle pagination on and off? I was thinking a simple (dumb) method might be to dynamically adjust the items_per_page to a really large number. I’m working with relatively small recordsets, so this would be viable for my scenario. Maybe you have a better idea or better yet, a code example.

    Reply
      • Not exactly. I just mean a toggle between a full long unpaginated list (one page), and the paginated version. For instance if someone wanted to print out all records, or copy/paste into Excel, it would be handy to toggle pagination off, but still be able to toggle it back on.

        Reply
  7. Pingback: paging - php.de
  8. Hi, cool plugin. I’m trying to use it, but I have a problem.

    I want to store into a cookie, the current page that I was looking before unloading the current html.

    How I can I get the value of the active page?

    I have a click handler ready, but I have an undefined error the the current_page variable.

    Thanks for your help!!

    Reply
    • There are a few options available, but some would need you to rework a small piece of the plugin:

      1. You could use jQuery to run through the navigation panel and find the active page (this is how the plugin does it and it quickest).
      2. You could change the plugin to persist that information using .data(). But you’d also have to maintain it which would make the code a bit dirty.
      3. You could create a plugin method that returns the active page number.

      Feel free to grab the source from github and play with it. You can also experiment in realtime with jsFiddle: http://jsfiddle.net/pzsv2/

      Reply
    • Hmmm, I’m a bit swamped at the moment but did you have a look here: http://tehnrd.com/pajination/example1.html. You’ll need to modify the transition effect to fade instead of… well whatever that’s called. Perhaps use that with the advice I gave ‘Cemile Bora’ higher up the page? Or maybe you can get in touch with her (I don’t have the deets but some stalking should help).

      Reply
    • Thanks Jonny. Great catch on the spelling, I think it might’ve been some mutant child of “ellipses” and “eclipse” 🙂

      The ellipses indicate that there are more page numbers than are currently shown e.g. you have 10 pages but have elected to only show 5 at a time. In the example you’ve cited the plug-in is told to start at a specific page, is this your situation too? Perhaps you can link to a page so that I can see exactly what you’re doing?

      Reply
    • A quick fix is to comment the following lines from the plugin file:

      navigation_html += less;

      navigation_html += more;

      Reply
    • Hi, I have the same exact problem: 5 pages, showing just 3 of them, and when loading the ellipses are shown at both sides, right (which is correct) and left (which is wrong!).
      After I change page, everything works as expected, the ellipses are shown at right if I load page 2, at both sides if I load page 3, and only at left if I load page 4, and obviously only at right when I load page 1.
      The problem is present ONLY at the first load.
      I’m using jQuery 1.7.1 and Firefox 9.
      It seems that the check on condition at line number 251 of the plugin fails, it always “show” the children in mine case, I can’t understand why because after I change the page it works as expected.

      Reply
  9. Hi Wes!

    Thanks so much for creating this simple and light plugin. It’s great!

    I’m actually curious if I can remotely call the goto() function — specifically ‘on page load’. I’m creating Unique URL’s for each of my pages that are created from pajinate(), so that people can share a specific page of paginated results. I’ve figured out how to create the URL’s, and now need to figure out how to call the goto() function on page load.

    I’ve created a question on Stack Overflow » http://stackoverflow.com/questions/3442581/jquery-pajinate-js-calling-goto-externally-manually.

    Maybe you could help me solve this issue?

    MUCH Thanks!

    Reply
  10. Hi there

    Is there any way you could add history on your pagination? So browser back button works?

    Is it possible to use your pagination with loading a contents dynamically using jquery load() method instead of having allready on a page (I have a LARGE set of 10000 items) ;-(

    Yours

    Jerry

    Reply
  11. hi

    i am very new to jquery and was wondering is there a way that when the user click on any of the buttons if returns them to the top of the page, as i have around 50 elements on each pages and it stays at the bottom of the page each time.

    Reply
    • Hi. I am not a professional coder but I found a solution that works for me. Open your jquery.pajinate,js file. Find the following functions within the file:
      $page_container.find(‘.first_link’).click(function(e){ });
      $page_container.find(‘.last_link’).click(function(e){ });
      $page_container.find(‘.previous_link’).click(function(e){ });
      $page_container.find(‘.next_link’).click(function(e){ };
      $page_container.find(‘.page_link’).click(function(e){ });

      And within their curly brackets { } add $(“html”).scrollTop(0);

      So it will look like this
      $page_container.find(‘.first_link’).click(function(e){ $(“html”).scrollTop(0); });

      Hope this helps!

      Reply
  12. Wes – This is great! I’m playing around with this and have a question. The items in my list have a “view detail” link which (basically) hides the content div and displays a detail div for the selected item. Included in the detail is a “return to list” link. Wondering if there is an easy way to navigate back to the page displayed when clicked. As is, I’m calling the pajinate function when I rerender the content div. and know I can set the start_page — so is there a way to set the start_page to what was the current_page? Make sense? Still trying to get a handle on Jquery, so apologies if this is a dumb question!

    Reply
    • Hi Slav, I think you’re saying that you want the current page number to sit in the middle? This is a good idea but it’s not part of the plug-in at the moment. If I’ve misunderstood though just let me know.

      Reply
    • Hi Slav, I think you’re saying that you want the current page number to sit in the middle? This is a good idea but it’s not part of the plug-in at the moment. If I’ve misunderstood though just let me know.

      Reply
  13. Thanks a lot, great plugin, saved me a lot of time and works beautifully.

    A possible improvement might be a switch to hide pagination in case there are no results / or one page only but that’s just a detail.

    Take care,
    Jan

    Reply
  14. Hey there!

    pajinate is a great plugin for jquery. thanx a lot. I have one question about. I’ve combined your pajinate with a selectable from the jqueryui lib. When i now try to select items from the pajinated list… my browsers slows down as hell. Do you have any ideas or solutions to this problem?

    thanx in advance.

    Reply
    • Unfortunately I can’t help you directly, but your browser can 🙂 Use Firebug for FF or Developer Tools for Chrome/Safari (both are built in) and monitor the resources and JS consoles.

      Reply
      • Chad, that’s an excellent idea but it’s not available yet. I’m looking forward to getting v2 this year and this suggestion is definitely going into the mix!

        Reply
  15. Hi,

    Can I ask is this a wordpress plugin or can it be used on any site, also would this work with server side code as well such as getting results back from a database ?

    Thanks

    Reply
    • for those interested in the above i’ve added a quick and dirty way of doing this:

      find: var total_items = $item_container.(children).size(); (line 48)

      add this line after that: if(total_items>options.items_per_page){

      then find: toggleMoreLess(); (line 140)

      and add after: }

      that’s all
      i’m sure Wes can give us all a better way but this works

      Reply
    • Yip but you’d have to use some bespoke jQuery to do it. Have a look at the plugin code, and the generated HTML. You can either modify the source code, or just work on top of it.

      Reply
      • Hi!

        This works so well! I’m so happy right now, you have no idea! :DDD
        I would also be grateful for a guide or just a hint, on how to disable/hide the previous button if you’re on the first page!

        Thank you so much for creating and sharing this plugin! 😀

        //Victoria

        Reply
  16. Love the plugin. Any ideas why it would stop working once the div elements to be paginated are dynamically removed and then re-added to the DOM?

    Reply
    • Pajinate will be loaded at your discretion and then builds the pagination DOM elements into the page; it’s at this time that things such as the number of pages are determined. Removing (and/or adding) elements after load will break the navigation in it’s current incarnation. You have two choices to achieve your goal: 1. Reload the plugin when altering the list of pagination elements or fork the project on github and make it smarter 🙂 If you’re going to choose option 2 I’d suggest creating a “reload” method that would recalculate all the important stuff (no. of pages etc.) whenever called. Good luck!

      Reply
    • Alas alack there is not yet, but that is a might fine idea. I’ve been writing a book for months, but now I’ll hopefully have some time to integrate some of the good ideas I’ve received 🙂

      Reply
      • Hi, has the “Show All” function been implemented yet? If anything, can I get an idea of what I need to do to accomplish this?

        Reply
      • Hi Wes, actually I think I have a solution (at least for my situation). I just made an on click function that shows all the li’s.
        jQuery('.alt_content li').show();

        Does that sound reasonable?

        Reply
    • Alas alack there is not yet, but that is a might fine idea. I’ve been writing a book for months, but now I’ll hopefully have some time to integrate some of the good ideas I’ve received 🙂

      Reply
      • Hi Wes, actually I think I have a solution (at least for my situation). I just made an on click function that shows all the li’s.
        jQuery('.alt_content li').show();

        Does that sound reasonable?

        Reply
    • Alas alack there is not yet, but that is a might fine idea. I’ve been writing a book for months, but now I’ll hopefully have some time to integrate some of the good ideas I’ve received 🙂

      Reply
      • Hi, has the “Show All” function been implemented yet? If anything, can I get an idea of what I need to do to accomplish this?

        Reply
  17. Hi .. it’s Awesome work

    I have installed your plugin in my web page . I am having 5 item in ‘content’ div, but i am only getting FirstPrev……NextLast this but in page source

    FirstPrev

    1
    2
    3
    Next
    Last

    i’ve noticed style=”display: none;” in ‘a’ tag.. how to display numbers please help me !

    Reply
  18. Hi .. it’s Awesome work

    I have installed your plugin in my web page . I am having 5 item in ‘content’ div, but i am only getting FirstPrev……NextLast this but in page source

    FirstPrev

    1
    2
    3
    Next
    Last

    i’ve noticed style=”display: none;” in ‘a’ tag.. how to display numbers please help me !

    Reply
  19. Hi .. it’s Awesome work

    I have installed your plugin in my web page . I am having 5 item in ‘content’ div, but i am only getting FirstPrev……NextLast this but in page source

    FirstPrev

    1
    2
    3
    Next
    Last

    i’ve noticed style=”display: none;” in ‘a’ tag.. how to display numbers please help me !

    Reply
  20. Have a look in the “Configuration” section of this post. The default is 20 items per page so you’d need more than that to see any page numbers.

    Reply
    • Thanks for response wes,

      Yes, I noticed that default configuration.But my config is given bellow
      $(‘#paging_container’).pajinate({ num_page_links_to_display :3,
      items_per_page : 2
      });

      i can get 2 items per page, but page number still not working any idea .. i’ve installed this plugin in following link
      http://optisolbusiness.com/gonzobidz/

      Reply
      • There seem to be several things wrong. As a learning exercise I think you should troubleshoot it. I’ll give you hints though:

        – Check that you’re using the required element IDs
        – Check that you’re using the required HTML markup, and that it’s in the right place.

        Reply
  21. Have a look in the “Configuration” section of this post. The default is 20 items per page so you’d need more than that to see any page numbers.

    Reply
  22. Hi Wes

    Great Plugin! So much easier to implement than the others out there.

    One issue… I’m trying to implement vers’ion #paging_container7 on your example page (“Show Subset of Page Links”). On the initial state (before clicking a page) it’s showing a leading … (ellipsis). When clicking on a page number, or next button then go back to page one the ellipsis disappears. I would like to remove the ellipsis on initial load, like in your example. I can’t work out why its doing this??

    Also, those three dots are a punctuation mark called an ‘ellipsis’. An ‘ellipse’ is a geometric shape much like an oval.

    http://en.wikipedia.org/wiki/Ellipsis

    Reply
    • Thanks Jonny. Great catch on the spelling, I think it might’ve been some mutant child of “ellipses” and “eclipse” 🙂

      The ellipses indicate that there are more page numbers than are currently shown e.g. you have 10 pages but have elected to only show 5 at a time. In the example you’ve cited the plug-in is told to start at a specific page, is this your situation too? Perhaps you can link to a page so that I can see exactly what you’re doing?

      Reply
      • Hi, I have the same exact problem: 5 pages, showing just 3 of them, and when loading the ellipses are shown at both sides, right (which is correct) and left (which is wrong!).
        After I change page, everything works as expected, the ellipses are shown at right if I load page 2, at both sides if I load page 3, and only at left if I load page 4, and obviously only at right when I load page 1.
        The problem is present ONLY at the first load.
        I’m using jQuery 1.7.1 and Firefox 9.
        It seems that the check on condition at line number 251 of the plugin fails, it always “show” the children in mine case, I can’t understand why because after I change the page it works as expected.

        Reply
    • A quick fix is to comment the following lines from the plugin file:

      navigation_html += less;

      navigation_html += more;

      Reply
  23. Hi Wes

    Great Plugin! So much easier to implement than the others out there.

    One issue… I’m trying to implement vers’ion #paging_container7 on your example page (“Show Subset of Page Links”). On the initial state (before clicking a page) it’s showing a leading … (ellipsis). When clicking on a page number, or next button then go back to page one the ellipsis disappears. I would like to remove the ellipsis on initial load, like in your example. I can’t work out why its doing this??

    Also, those three dots are a punctuation mark called an ‘ellipsis’. An ‘ellipse’ is a geometric shape much like an oval.

    http://en.wikipedia.org/wiki/Ellipsis

    Reply
    • Thanks Jonny. Great catch on the spelling, I think it might’ve been some mutant child of “ellipses” and “eclipse” 🙂

      The ellipses indicate that there are more page numbers than are currently shown e.g. you have 10 pages but have elected to only show 5 at a time. In the example you’ve cited the plug-in is told to start at a specific page, is this your situation too? Perhaps you can link to a page so that I can see exactly what you’re doing?

      Reply
  24. Hi Wes

    Great Plugin! So much easier to implement than the others out there.

    One issue… I’m trying to implement vers’ion #paging_container7 on your example page (“Show Subset of Page Links”). On the initial state (before clicking a page) it’s showing a leading … (ellipsis). When clicking on a page number, or next button then go back to page one the ellipsis disappears. I would like to remove the ellipsis on initial load, like in your example. I can’t work out why its doing this??

    Also, those three dots are a punctuation mark called an ‘ellipsis’. An ‘ellipse’ is a geometric shape much like an oval.

    http://en.wikipedia.org/wiki/Ellipsis

    Reply
  25. Hi Wes! Great work indeed!

    I plan to implement it with huge data sets but I want to set up the current page to show in the middle e.g. if you have let’s say 50 pages and you set num_page_links_to_display to 10, and then if you are somewhere into that range( e.g. 4-13) the current page(8) to be always the 5th one, so to have 4 links before 5 links after that. Is that make any sense? Any tip would be helpful.
    Thank you in advance.

    Reply
    • Hi Slav, I think you’re saying that you want the current page number to sit in the middle? This is a good idea but it’s not part of the plug-in at the moment. If I’ve misunderstood though just let me know.

      Reply
  26. Hi Wes! Great work indeed!

    I plan to implement it with huge data sets but I want to set up the current page to show in the middle e.g. if you have let’s say 50 pages and you set num_page_links_to_display to 10, and then if you are somewhere into that range( e.g. 4-13) the current page(8) to be always the 5th one, so to have 4 links before 5 links after that. Is that make any sense? Any tip would be helpful.
    Thank you in advance.

    Reply
  27. Hi Wes, I love how simple it is to initiate the plugin and get pagination going. I’m wondering if it might be simple to add some kind of filtering to this? i’d like to be able to keep all content in the container and somehow just be able to ignore the content set to not be shown by a filter. Once a use click on a filter type maybe it can update the pagination to reflect the filter without a page reload.

    Reply
    • Chad, that’s an excellent idea but it’s not available yet. I’m looking forward to getting v2 this year and this suggestion is definitely going into the mix!

      Reply
  28. Hi Wes, I love how simple it is to initiate the plugin and get pagination going. I’m wondering if it might be simple to add some kind of filtering to this? i’d like to be able to keep all content in the container and somehow just be able to ignore the content set to not be shown by a filter. Once a use click on a filter type maybe it can update the pagination to reflect the filter without a page reload.

    Reply
  29. Hi Wes, I love how simple it is to initiate the plugin and get pagination going. I’m wondering if it might be simple to add some kind of filtering to this? i’d like to be able to keep all content in the container and somehow just be able to ignore the content set to not be shown by a filter. Once a use click on a filter type maybe it can update the pagination to reflect the filter without a page reload.

    Reply
  30. Hi there. I’m expecting many pages to be returned in my search results.

    Let’s say there are 30 pages returned, showing 5 at a time. Can it be made that when the next button is clicked, pages 1-5 change to 6-10, then 11-15 etc.. instead of moving 1 page at a time? Same for previous, if currently viewing the 6-10 page set, prev would show pages 1-5.

    Clicking the numbers themeselves would still take you to that specific result set

    Any ideas? thanks!!

    Reply
  31. Hi there. I’m expecting many pages to be returned in my search results.

    Let’s say there are 30 pages returned, showing 5 at a time. Can it be made that when the next button is clicked, pages 1-5 change to 6-10, then 11-15 etc.. instead of moving 1 page at a time? Same for previous, if currently viewing the 6-10 page set, prev would show pages 1-5.

    Clicking the numbers themeselves would still take you to that specific result set

    Any ideas? thanks!!

    Reply
  32. Hi there. I’m expecting many pages to be returned in my search results.

    Let’s say there are 30 pages returned, showing 5 at a time. Can it be made that when the next button is clicked, pages 1-5 change to 6-10, then 11-15 etc.. instead of moving 1 page at a time? Same for previous, if currently viewing the 6-10 page set, prev would show pages 1-5.

    Clicking the numbers themeselves would still take you to that specific result set

    Any ideas? thanks!!

    Reply
  33. Thanks for the excellent plugin. I have already deployed it on a web site that I will be publishing soon. Awesome.

    I have one question: (How) Is it possible to get the page to scroll to an HTML anchor (, after one of the num_page_links has been clicked?

    This is required, in the case that the top of the list that you are paginating has scrolled off the top of the page.

    Thanks in advance.

    Reply
  34. Thanks for the excellent plugin. I have already deployed it on a web site that I will be publishing soon. Awesome.

    I have one question: (How) Is it possible to get the page to scroll to an HTML anchor (, after one of the num_page_links has been clicked?

    This is required, in the case that the top of the list that you are paginating has scrolled off the top of the page.

    Thanks in advance.

    Reply
  35. I’m using this plugin on a page of my site, but i was wondering how i would make this jump to the top of the page once a pagination link had been clicked.

    At the moment, i have the navigation at the top and bottom of the content, whenever you use the bottom navigation links, it stays at the bottom of the page which isn’t ideal.

    Reply
  36. I’m using this plugin on a page of my site, but i was wondering how i would make this jump to the top of the page once a pagination link had been clicked.

    At the moment, i have the navigation at the top and bottom of the content, whenever you use the bottom navigation links, it stays at the bottom of the page which isn’t ideal.

    Reply
  37. I feel like I’m missing something huge here. I’m new to java script and jQuery so I can read your plugin but I’m not 100% on every aspect about it.

    What I’m trying to do is re-position the pagination navigation and fix it so people can click around my posts but still scroll, but when I use position: fixed; in css (or any css positioning) it either breaks the nav bar or does nothing to it. I’m assuming this has something to do with how these numbers are generated in the plugin. Any thoughts (even “sorry dude, that’s how this works”) would be super helpful.

    Great plugin by the way, and super easy to impliment. Can’t wait to get it working on my main site which feels like it’s pretty close to completion.

    Reply
  38. I feel like I’m missing something huge here. I’m new to java script and jQuery so I can read your plugin but I’m not 100% on every aspect about it.

    What I’m trying to do is re-position the pagination navigation and fix it so people can click around my posts but still scroll, but when I use position: fixed; in css (or any css positioning) it either breaks the nav bar or does nothing to it. I’m assuming this has something to do with how these numbers are generated in the plugin. Any thoughts (even “sorry dude, that’s how this works”) would be super helpful.

    Great plugin by the way, and super easy to impliment. Can’t wait to get it working on my main site which feels like it’s pretty close to completion.

    Reply
  39. I feel like I’m missing something huge here. I’m new to java script and jQuery so I can read your plugin but I’m not 100% on every aspect about it.

    What I’m trying to do is re-position the pagination navigation and fix it so people can click around my posts but still scroll, but when I use position: fixed; in css (or any css positioning) it either breaks the nav bar or does nothing to it. I’m assuming this has something to do with how these numbers are generated in the plugin. Any thoughts (even “sorry dude, that’s how this works”) would be super helpful.

    Great plugin by the way, and super easy to impliment. Can’t wait to get it working on my main site which feels like it’s pretty close to completion.

    Reply
  40. First of all, thank you for this excellent plugin! Secondly, I want to keep the tap (or click) behavior on the iphone and ipad, so that when I double tap a paragraph or image it zooms in, and out when I double tap again.

    Can this be done with this plugin and could you send me in the right direction on how to do it?

    My current implementation is on http://www.marcbuurke.nl/portfolio.php If you want I can send you the current plugin code, I modified it a bit and optimized it for loading.

    Reply
  41. First of all, thank you for this excellent plugin! Secondly, I want to keep the tap (or click) behavior on the iphone and ipad, so that when I double tap a paragraph or image it zooms in, and out when I double tap again.

    Can this be done with this plugin and could you send me in the right direction on how to do it?

    My current implementation is on http://www.marcbuurke.nl/portfolio.php If you want I can send you the current plugin code, I modified it a bit and optimized it for loading.

    Reply
    • Ek hou baie van jou site!

      What problem are you experiencing on the mobile side? I’m guessing a double tap fires the plugin event handler? I’m not sure how you could fix this but I’d start by looking at jquery mobile. I would love to see your optimised code. Do you have a github account? That way you could just fork my code and issue a pull request – makes it easy for me to see the differences.

      Reply
      • I’ve learned a lot since I used this rad plugin, and this plugin really is still rad.. But if you guys wanna have special functionality for iOS devices, I found this handy little piece of code that uses a regex to tease out the OS type. I think it might be what you’re looking for. I have a site right now that uses flash (argh I know, but it’s unavoidable… html 5 and browsers natively supporting websockets will help ween me off of that dependency) so I needed a way to have a special message for people on iOS devices. My thought is you can have a switch at the first layer of your function that does one thing for iOS devices and one thing for non iOS devices. here’s the link

        http://www.sitepoint.com/identify-apple-iphone-ipod-ipad-visitors/

        and here’s the code:
        var Apple = {};
        Apple.UA = navigator.userAgent;
        Apple.Device = false;
        Apple.Types = [“iPhone”, “iPod”, “iPad”];
        for (var d = 0; d < Apple.Types.length; d++) {
        var t = Apple.Types[d];
        Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
        Apple.Device = Apple.Device || Apple[t];
        }

        Reply
  42. First of all, thank you for this excellent plugin! Secondly, I want to keep the tap (or click) behavior on the iphone and ipad, so that when I double tap a paragraph or image it zooms in, and out when I double tap again.

    Can this be done with this plugin and could you send me in the right direction on how to do it?

    My current implementation is on http://www.marcbuurke.nl/portfolio.php If you want I can send you the current plugin code, I modified it a bit and optimized it for loading.

    Reply
  43. Having a strange issue, hopefully someone will see this and respond soon.

    I am trying to use Pajination on search results (using jQuery Mobile, PHP and mySQL), and it is working. But not completely. When I initially type in my search string, and hit “search” the results page comes up as one long list. When I hit “refresh” on that page, it is paginated correctly.

    Does anyone have any idea what could cause this?

    Thanks in advance!

    Reply
  44. Having a strange issue, hopefully someone will see this and respond soon.

    I am trying to use Pajination on search results (using jQuery Mobile, PHP and mySQL), and it is working. But not completely. When I initially type in my search string, and hit “search” the results page comes up as one long list. When I hit “refresh” on that page, it is paginated correctly.

    Does anyone have any idea what could cause this?

    Thanks in advance!

    Reply
      • the page is a personal site, and i don’t really feel comfortable posting a link on an open message board. but if you will e-mail me, i’ll send you the link. bmrust (at) gmail (dot) com

        thanks!

        Reply
  45. Having a strange issue, hopefully someone will see this and respond soon.

    I am trying to use Pajination on search results (using jQuery Mobile, PHP and mySQL), and it is working. But not completely. When I initially type in my search string, and hit “search” the results page comes up as one long list. When I hit “refresh” on that page, it is paginated correctly.

    Does anyone have any idea what could cause this?

    Thanks in advance!

    Reply
  46. Having a strange issue, hopefully someone will see this and respond soon.

    I am trying to use Pajination on search results (using jQuery Mobile, PHP and mySQL), and it is working. But not completely. When I initially type in my search string, and hit “search” the results page comes up as one long list. When I hit “refresh” on that page, it is paginated correctly.

    Does anyone have any idea what could cause this?

    Thanks in advance!

    Reply
  47. Hi there, I have following HTML Structure:

    foo
    boo

    ….

    then 200 , end everything closed correctly.

    I’m calling the function with:

    $(document).ready(function(){
    $(‘#pagination_content’).pajinate();
    });

    Is it because it is sub div within 2 classes ? can this somehow be set to work ?

    And as a question, I changed my code so every of my 200 articles is now , but I used to have articles within tags, can sub-dives be paginated somehow with minor modifications in your script ?

    Reply
  48. Hi there, I have following HTML Structure:

    foo
    boo

    ….

    then 200 , end everything closed correctly.

    I’m calling the function with:

    $(document).ready(function(){
    $(‘#pagination_content’).pajinate();
    });

    Is it because it is sub div within 2 classes ? can this somehow be set to work ?

    And as a question, I changed my code so every of my 200 articles is now , but I used to have articles within tags, can sub-dives be paginated somehow with minor modifications in your script ?

    Reply
  49. Hi there, I have following HTML Structure:

    foo
    boo

    ….

    then 200 , end everything closed correctly.

    I’m calling the function with:

    $(document).ready(function(){
    $(‘#pagination_content’).pajinate();
    });

    Is it because it is sub div within 2 classes ? can this somehow be set to work ?

    And as a question, I changed my code so every of my 200 articles is now , but I used to have articles within tags, can sub-dives be paginated somehow with minor modifications in your script ?

    Reply
  50. Hi there, I have following HTML Structure:

    foo
    boo

    ….

    then 200 , end everything closed correctly.

    I’m calling the function with:

    $(document).ready(function(){
    $(‘#pagination_content’).pajinate();
    });

    Is it because it is sub div within 2 classes ? can this somehow be set to work ?

    And as a question, I changed my code so every of my 200 articles is now , but I used to have articles within tags, can sub-dives be paginated somehow with minor modifications in your script ?

    Reply
  51. Hi Wes, was wondering if the value for the items_per_page was accessible via the dom? Also, is there a variable for the current page in the pajinator?

    I have a google map showing markers for results returned, but dont know where to look for the starting item number, and the number of items in the current pagination list.

    If there is documentation which spells this out, just let me know what the link is. Thanks.

    Reply
    • Hi Brett, unfortunately the functionality you’re talking about doesn’t currently exist. I wrote this plugin waaaay back in the day and the things you’re asking for probably should’ve been there from the beginning. You live you learn 🙂

      That said the way to do this is outlined in this article under “Provide public access to default plugin settings”. I don’t think I’ll have time to add this in in the short-term but I’d be happy to accept any pull requests 😉

      Reply
  52. Hi Wes, was wondering if the value for the items_per_page was accessible via the dom? Also, is there a variable for the current page in the pajinator?

    I have a google map showing markers for results returned, but dont know where to look for the starting item number, and the number of items in the current pagination list.

    If there is documentation which spells this out, just let me know what the link is. Thanks.

    Reply
    • Hi Brett, unfortunately the functionality you’re talking about doesn’t currently exist. I wrote this plugin waaaay back in the day and the things you’re asking for probably should’ve been there from the beginning. You live you learn 🙂

      That said the way to do this is outlined in this article under “Provide public access to default plugin settings”. I don’t think I’ll have time to add this in in the short-term but I’d be happy to accept any pull requests 😉

      Reply
  53. Hi Wes, was wondering if the value for the items_per_page was accessible via the dom? Also, is there a variable for the current page in the pajinator?

    I have a google map showing markers for results returned, but dont know where to look for the starting item number, and the number of items in the current pagination list.

    If there is documentation which spells this out, just let me know what the link is. Thanks.

    Reply
    • Hi Brett, unfortunately the functionality you’re talking about doesn’t currently exist. I wrote this plugin waaaay back in the day and the things you’re asking for probably should’ve been there from the beginning. You live you learn 🙂

      That said the way to do this is outlined in this article under “Provide public access to default plugin settings”. I don’t think I’ll have time to add this in in the short-term but I’d be happy to accept any pull requests 😉

      Reply
  54. Es posible implementar un callback al cambiar de pagina ?
    Seria muy util para hacer algun efecto de transicion en los elementos.
    Ya que el cambio de pagina es tan rapido que no da la sensacion de haberse refrescado el contendido.
    Muchas Gracias

    Reply
  55. Es posible implementar un callback al cambiar de pagina ?
    Seria muy util para hacer algun efecto de transicion en los elementos.
    Ya que el cambio de pagina es tan rapido que no da la sensacion de haberse refrescado el contendido.
    Muchas Gracias

    Reply
  56. Es posible implementar un callback al cambiar de pagina ?
    Seria muy util para hacer algun efecto de transicion en los elementos.
    Ya que el cambio de pagina es tan rapido que no da la sensacion de haberse refrescado el contendido.
    Muchas Gracias

    Reply
  57. Es posible implementar un callback al cambiar de pagina ?
    Seria muy util para hacer algun efecto de transicion en los elementos.
    Ya que el cambio de pagina es tan rapido que no da la sensacion de haberse refrescado el contendido.
    Muchas Gracias

    Reply
  58. I was wondering if you’ve come across a reason why items wouldn’t be hidden on page load? I’m paging a bunch of divs and the navigation appears correctly (right # of tabs) and the info text shows correctly. I have 65 divs and I’ve set it to 2 per page for easy debugging. Info text shows “Showing 1-2 of 65 results”, but all 65 show. If I click to the second page it correctly shows divs 3 & 4. If I then click page 1 I correctly see divs 1 & 2.

    Any ideas?

    http://www.heartofbusiness.com/alumni-community-list/

    Reply
  59. Nice. but, i am facing one issue.
    I am having multiple pagination in a page.
    If i am clicking on ‘last’ page of the first pagination, ‘no_more’ styles geeting added in the other pagination links also.
    This was happening when i am using 1.6.2.min library and it is working in 1.4.2 which you used.
    But i am maintaining common js lib throughout my site. So, i want to make this getting solved with 1.6.2.min itself. Kindly reply as soon as possible.

    Reply
  60. Nice. but, i am facing one issue.
    I am having multiple pagination in a page.
    If i am clicking on ‘last’ page of the first pagination, ‘no_more’ styles geeting added in the other pagination links also.
    This was happening when i am using 1.6.2.min library and it is working in 1.4.2 which you used.
    But i am maintaining common js lib throughout my site. So, i want to make this getting solved with 1.6.2.min itself. Kindly reply as soon as possible.

    Reply
  61. Nice. but, i am facing one issue.
    I am having multiple pagination in a page.
    If i am clicking on ‘last’ page of the first pagination, ‘no_more’ styles geeting added in the other pagination links also.
    This was happening when i am using 1.6.2.min library and it is working in 1.4.2 which you used.
    But i am maintaining common js lib throughout my site. So, i want to make this getting solved with 1.6.2.min itself. Kindly reply as soon as possible.

    Reply
    • Thanks for the tip! How did you manage to load the images of the subsequent pages? Only the images in the first page are dynamicaly loaded. Going to the next page doesn’t load the images of that page. Hope you can help me on this.

      Reply
  62. Forgot to add in my last post, if your using lazy load I also needed to add $(“body”).trigger(“scroll”); at the bottom of all the functions handling the pages e.g showNextPage

    Reply
  63. Forgot to add in my last post, if your using lazy load I also needed to add $(“body”).trigger(“scroll”); at the bottom of all the functions handling the pages e.g showNextPage

    Reply
  64. Forgot to add in my last post, if your using lazy load I also needed to add $(“body”).trigger(“scroll”); at the bottom of all the functions handling the pages e.g showNextPage

    Reply
  65. Forgot to add in my last post, if your using lazy load I also needed to add $(“body”).trigger(“scroll”); at the bottom of all the functions handling the pages e.g showNextPage

    Reply
  66. Hey I am using pajinate plugin it works fine. Is their way to reset pagination after applying data manipulation like sort or filtering the list items.

    Reply
  67. Hey I am using pajinate plugin it works fine. Is their way to reset pagination after applying data manipulation like sort or filtering the list items.

    Reply
  68. Hey I am using pajinate plugin it works fine. Is their way to reset pagination after applying data manipulation like sort or filtering the list items.

    Reply
  69. Hi Wez, I tried to make the page jump to the top using the name link method, but after modifying the script by adding a tag on the 5 hrefs and clicking the pagination, nothing happens! What am I doing wrong?

    Reply
  70. Hi Wez, I tried to make the page jump to the top using the name link method, but after modifying the script by adding a tag on the 5 hrefs and clicking the pagination, nothing happens! What am I doing wrong?

    Reply
  71. hi Wes, thanks for the simply and efficient plugin, I shared it on my Facebook and soon i’ll write a little rec on my blog!
    can You tell me how remove prev-first when the user is on first page, and next-last when the user is on the last page?
    Thank you in adavnced

    Reply
  72. hi Wes, thanks for the simply and efficient plugin, I shared it on my Facebook and soon i’ll write a little rec on my blog!
    can You tell me how remove prev-first when the user is on first page, and next-last when the user is on the last page?
    Thank you in adavnced

    Reply
  73. Hi, this is a great code . . its working fine but in the pagination links i.e. First Prev 1 2 3 …. am not getting formatted o/p. Its displaying page links as 1234. . I am implementing #paging_container1…

    Reply
  74. how to use this in table?
    I’ve tried it but did not succeed
    This can not count the number of rows to be displayed
    (I am sorry about my bad english, I use google translation)

    Reply
  75. how to use this in table?
    I’ve tried it but did not succeed
    This can not count the number of rows to be displayed
    (I am sorry about my bad english, I use google translation)

    Reply
  76. how to use this in table?
    I’ve tried it but did not succeed
    This can not count the number of rows to be displayed
    (I am sorry about my bad english, I use google translation)

    Reply
  77. Awesome plugin, thank you! I am using pajinate with jquery cycle to page through an image thumbnail index. What I would like to do is, instead of page numbers, display the range of items on each page. For example, 1-15, 16-30, 31-40. Are you aware of any modifications that would allow this? Thanks.

    Reply
    • Update. I was able to solve this with the following, beginning on line 94. In case someone finds it useful:

      case “num”:
      navigation_html += less;
      var current_link = 0;
      // Display a range of items per page in place of page numbers (e.g. 1-5, 6-10, 11-15, etc.)
      while (number_of_pages > current_link) {
      var range_value = options.items_per_page; // The number of items per page
      var range_from = (current_link * range_value) + 1; // Start value per page
      var range_to = (range_from + range_value) – 1; // End value per page
      var remainder = total_items % range_value; // Remainder
      var range_last = range_from + remainder; // Used on last page for when items are not evenly divisible (e.g. 1-5, 6-10, 11-13)

      // If not last page
      if (number_of_pages != (current_link + 1) ) {
      navigation_html += ‘‘ + range_from + ‘-‘ + range_to + ‘‘;
      }

      // Last page
      else {
      navigation_html += ‘‘ + range_from + ‘-‘ + range_last + ‘‘;
      }

      current_link++;
      }

      Reply
  78. Awesome plugin, thank you! I am using pajinate with jquery cycle to page through an image thumbnail index. What I would like to do is, instead of page numbers, display the range of items on each page. For example, 1-15, 16-30, 31-40. Are you aware of any modifications that would allow this? Thanks.

    Reply
  79. hey, great script, i get something wrong though, i set the parameters to display 3 per page and i get the first to display 2 and the rest 3. the start page is set to 0. any ideas?

    Reply
  80. hey, great script, i get something wrong though, i set the parameters to display 3 per page and i get the first to display 2 and the rest 3. the start page is set to 0. any ideas?

    Reply
  81. Hello @wesnolte,
    I download your script jquery.pajinate, and I need one small modification, but I can’t modify this.
    Now I have this:

    [1] – active page

    But I need something like this:
    (9 is last page)

    Please help me 🙂

    Reply
  82. Hello @wesnolte,
    I download your script jquery.pajinate, and I need one small modification, but I can’t modify this.
    Now I have this:

    [1] – active page

    But I need something like this:
    (9 is last page)

    Please help me 🙂

    Reply
  83. Excellent Plugin, works like charm.. made life easier, i have one question if i jump from page number one to page number ten it doesn’t allow me to move pages left and doesn’t show the page links 8,9,10 as i have given three page links to be displayed ….could you please help on this

    Reply
  84. Excellent Plugin, works like charm.. made life easier, i have one question if i jump from page number one to page number ten it doesn’t allow me to move pages left and doesn’t show the page links 8,9,10 as i have given three page links to be displayed ….could you please help on this

    Reply
  85. if I want to show two columns. Where place can i write code?
    because i use “Show Subset of Page Links” type of pagination.

    Please! help me too. Thanks!

    Reply
  86. if I want to show two columns. Where place can i write code?
    because i use “Show Subset of Page Links” type of pagination.

    Please! help me too. Thanks!

    Reply
  87. if I want to show two columns. Where place can i write code?
    because i use “Show Subset of Page Links” type of pagination.

    Please! help me too. Thanks!

    Reply
  88. Hi, great Plugin, i’m using it for an internal messaging system, but theres a small problem;

    When i delete a message i currently also set the “li” tag to “display: none;” so that the message (that has been deleted via ajax in the background) immediately disappears.

    Then, of course, i have one message less on that page, although there are more on page 2,3,4… etc

    Is it possible to make page one getting “filled” with the “li”s from the next pages when disabling / removing a “li” on page one? Like a function, that removes a given “li” and “recalculates” the pagination or something like that?

    Reply
  89. Hi, great Plugin, i’m using it for an internal messaging system, but theres a small problem;

    When i delete a message i currently also set the “li” tag to “display: none;” so that the message (that has been deleted via ajax in the background) immediately disappears.

    Then, of course, i have one message less on that page, although there are more on page 2,3,4… etc

    Is it possible to make page one getting “filled” with the “li”s from the next pages when disabling / removing a “li” on page one? Like a function, that removes a given “li” and “recalculates” the pagination or something like that?

    Reply
  90. Hi, great Plugin, i’m using it for an internal messaging system, but theres a small problem;

    When i delete a message i currently also set the “li” tag to “display: none;” so that the message (that has been deleted via ajax in the background) immediately disappears.

    Then, of course, i have one message less on that page, although there are more on page 2,3,4… etc

    Is it possible to make page one getting “filled” with the “li”s from the next pages when disabling / removing a “li” on page one? Like a function, that removes a given “li” and “recalculates” the pagination or something like that?

    Reply
  91. Hi, i found a solution myself:

    I give the “li”s uniquie IDs and when i delete a message i remove that “li” via jQuery’s remove() function and then call the pajinate() function again 🙂

    Reply
  92. Hi, i found a solution myself:

    I give the “li”s uniquie IDs and when i delete a message i remove that “li” via jQuery’s remove() function and then call the pajinate() function again 🙂

    Reply
  93. Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries
    that they just don’t know about. You managed to hit the nail upon the top as well as defined
    out the whole thing without having side effect ,
    people can take a signal. Will likely be back to get more.
    Thanks, http://tinyurl.com/o8jgmoy

    Reply
  94. Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries
    that they just don’t know about. You managed to hit the nail upon the top as well as defined
    out the whole thing without having side effect ,
    people can take a signal. Will likely be back to get more.
    Thanks, http://tinyurl.com/o8jgmoy

    Reply
  95. Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries
    that they just don’t know about. You managed to hit the nail upon the top as well as defined
    out the whole thing without having side effect ,
    people can take a signal. Will likely be back to get more.
    Thanks, http://tinyurl.com/o8jgmoy

    Reply
  96. Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries
    that they just don’t know about. You managed to hit the nail upon the top as well as defined
    out the whole thing without having side effect ,
    people can take a signal. Will likely be back to get more.
    Thanks, http://tinyurl.com/o8jgmoy

    Reply
    • Ek hou baie van jou site!

      What problem are you experiencing on the mobile side? I’m guessing a double tap fires the plugin event handler? I’m not sure how you could fix this but I’d start by looking at jquery mobile. I would love to see your optimised code. Do you have a github account? That way you could just fork my code and issue a pull request – makes it easy for me to see the differences.

      Reply
      • I’ve learned a lot since I used this rad plugin, and this plugin really is still rad.. But if you guys wanna have special functionality for iOS devices, I found this handy little piece of code that uses a regex to tease out the OS type. I think it might be what you’re looking for. I have a site right now that uses flash (argh I know, but it’s unavoidable… html 5 and browsers natively supporting websockets will help ween me off of that dependency) so I needed a way to have a special message for people on iOS devices. My thought is you can have a switch at the first layer of your function that does one thing for iOS devices and one thing for non iOS devices. here’s the link

        http://www.sitepoint.com/identify-apple-iphone-ipod-ipad-visitors/

        and here’s the code:
        var Apple = {};
        Apple.UA = navigator.userAgent;
        Apple.Device = false;
        Apple.Types = [“iPhone”, “iPod”, “iPad”];
        for (var d = 0; d < Apple.Types.length; d++) {
        var t = Apple.Types[d];
        Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
        Apple.Device = Apple.Device || Apple[t];
        }

        Reply
    • I’ve learned a lot since I used this rad plugin, and this plugin really is still rad.. But if you guys wanna have special functionality for iOS devices, I found this handy little piece of code that uses a regex to tease out the OS type. I think it might be what you’re looking for. I have a site right now that uses flash (argh I know, but it’s unavoidable… html 5 and browsers natively supporting websockets will help ween me off of that dependency) so I needed a way to have a special message for people on iOS devices. My thought is you can have a switch at the first layer of your function that does one thing for iOS devices and one thing for non iOS devices. here’s the link

      http://www.sitepoint.com/identify-apple-iphone-ipod-ipad-visitors/

      and here’s the code:
      var Apple = {};
      Apple.UA = navigator.userAgent;
      Apple.Device = false;
      Apple.Types = [“iPhone”, “iPod”, “iPad”];
      for (var d = 0; d < Apple.Types.length; d++) {
      var t = Apple.Types[d];
      Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
      Apple.Device = Apple.Device || Apple[t];
      }

      Reply
  97. Pingback: - Khan Shab
  98. Pingback: - Khan Shab

Leave a Comment