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, the time between paginated-page loads is almost nil (up to a reasonable page-size of course).

234 Responses

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

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 😉

[…] Pajinate is a simple jQuery plugin that allows you to divide long lists or areas of content into separate pages. It provides an easy alternative to server-side implementations, when the amount of data is of reasonable size; another good thing is that there is no load-time between pages. […]

[…] Pajinate is a jQuery plugin that can auto-generate a paginated navigation for list items or any other areas of content.The plugin is specially handy when working with long lists in a limited space (but still require a quick navigation).The pagination menu generated has the first-last, prev-next and the page numbers and the text for them can be customized.It is also possible to set the: […]

[…] updates on this topic.Powered by WP Greet Box WordPress Plugin Powered by Max Banner Ads Pajinate is a jQuery plugin that can auto-generate a paginated navigation for list items or any other areas […]

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

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?

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.

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.

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.

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.

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.

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.

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/

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

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.

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.

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); });

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!

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?

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!

Yeah I answered the question just above BUT it looks like someone has forked my project on Github recently allowing you to load data into the list using AJAX. You can check out the fork from here: http://github.com/wesnolte/Pajinate

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.

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?

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.

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.

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.

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.

[…] "pub-3165506645002435";google_ad_slot = "3433820016";google_ad_width = 336;google_ad_height = 280; Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content […]

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

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.

I can’t be sure what’s going wrong since CSS cascades – it could be a number of things. As long as your HTML markup fits the plugin specification you should be good to go… the other bit you’ll need is knowledge of CSS positioning and the best article on the internet for that is here: http://www.barelyfitz.com/screencast/html-training/css/positioning/

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?

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.

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

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.

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 😉

Actually, I’ve used HTML5 sessionStorage to retreive the current page. Use sessionStorage.setItem(‘curPage’,page_num); added to jquery.pajinate.js in function gotopage() (just before toggleMoreLess();) and it works like a champ. Just use sessionStorage.curPage to retreive it. See here: http://code.google.com/p/sessionstorage/

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.

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.

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.

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?

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

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…

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.

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

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?

Salesforce Handbook

Jeff Douglas and I have recently completed our comprehensive guide to salesforce.com and the Force.com Platform. The book targets both developers and administrators who use the platform, or are looking to get into it. For more information feel free to peruse the listing by clicking on the button below.