jQuery Quick Pagination plugin
I have just added a quick, simple jQuery pagination plugin to my projects area.
It basically allows you to paginate any collection of elements on the page, adding very simple prev / next links (as well as a ‘page’ counter if required) to allow navigation.
I often use this to paginate a list of news articles, or as a very simple way to throw together a little ’slideshow’ (by paginating through images with the ‘perpage’ setting set to 1).
It can paginate pretty much any collection of elements (of mixed types if required), including images, divs, elements in an unordered list etc (ordered list li’s don’t work well – try it and see why!).
Once again, I’ve kinda rushed it up there so if you spot any bugs or mistakes in the documentation etc, just drop a comment below and I will look at it asap.
43 Responses to “jQuery Quick Pagination plugin”
Erwin Heiser says:
Seriously sweet this and just what I was looking for for an upcoming project. Many thanks!
Blaine says:
This is very cool however I ran into a small bug when working with two paging elements and setting the showcounter to true for both on the same page, the counter shows up twice for the first element and just once in the second. Also, the page count is changed for all three when clicked. An easy way to test this is to set showcounter to true for both on your demo page.
Mark says:
@Erwin Heiser – Glad you like it!
@Blaine – thanks very much for the bug report – all fixed and updated now.
Patrick says:
can this work with mysql, populating the the list tags with mysql results with a limit of 10 per page and when the user click next or a page number is populates more.
I can’t list all the results at once cause some users have 200-300 results and that would make for a long list
Mark says:
@Patrick – no, sorry, this isn’t designed to be an ajax pagination plugin, just quick and easy pagination for relatively small datasets. I hope you find something to help you out!
Roger Theriault says:
Nice… one small issue, you used $() in one place, var pagerNav = $(), which will cause an empty Nav if the $ shortcut is not enabled (particularly in WordPress).
Todd says:
This is a great plugin! Only problem I see is that when the user reaches the end of the counter, the next arrow/link should be disabled. Just as previous should be at the start. Maybe just turn each endpoint into display text.
keep up the good work!
Todd says:
Another thing, it would be nice if there was a way to toggle pagination on and off. My jQuery and js skills aren’t too sharp, but if these are possible it would be great and make it more usable.
thanks!
Mark says:
@Roger Theriault – thanks, good spot, I will clean it up and upload an updated version when I have a spare second.
@Todd – Glad you like it! I agree with your point about the prev/next links, but they do have a class appended to them when they are at the start/end of the series. The class name give to them is ‘qp_disabled’ – this class name is not currently configurable (i will amend that at some point) but you could use it to hide/show the links or use a bit of js to alter them in any way you see fit! I hope that helps.
As for toggling, I wanted to keep the plugin as lightwieght as possible so I think I will keep that as an excerise for the user. Thanks for the suggestion though!
jeffro says:
Just add this css and disabled links are gone:
.qp_disabled {
visibility: hidden;
}
Digital-J says:
Hi! this seems very useful! One question: is it how hard to change behaviour so that when paginating long texts, writer could cut the page where s/he wants? Like adding some after text block intended to be the last in current page? I tried several combinatios but didn’t find a way.
Digital-J says:
Code was removed from my comment :) I tried to add code for hr with some non-sense class applied:
“Like adding some hr class = cut-page_here after text block intended to be the last in the current page.
Enrique says:
This is the most effective pagination tool I have ever seen. Thank you!
I have one question:
What if I want to execute a javascript function everytime the user clicks the prev or next links. What I’m trying to do is to reload some ads that I have in my website everytime the user clicks. I would appreciate any help!!
Thank you!
Bright says:
Hi There,
Good work! i am really new in with jQuery and therefore this pluggin has helped me alot. I am encountering slight issues which i want to findout if it’s a bug.
My issue is i use jQuery ajax to search and display result without page refresh. I am paginating through the result using quickpagination pluggin.
Obviously because the page is not refresh after every search and display – i end up with duplicate pager. Meaning the pager replicates anytime new search is made.
Is there a resolution for this?
B
Mark says:
Hi guys, apologies for being so slow to replying to your comments – been pretty busy lately!
@Digital-J – It would be a pretty big re-write to get that functionality working, the plugin is only really intended to paginate through a pre-defined list of elements. Sorry!
@Enrique – you could do this, just target the next/prev links as you would any other link on the page (they have the class names .qp_next and .qp_prev respectively, unless overridden) and then call some function on click, for instance:
$(".qp_prev").click(function(){ myGreatFunction(); });I hope that helps!
@Bright – I’m not sure I totally understand, sorry – do you have a test page up anywhere that I could take a look at to see if I can figure out what is going on?
Bright says:
I have been able to solve this issue by clearing the div holding the pager(navigation links) before rendering.
Like this;
$(“#pager”).html(“”);
Asinox says:
Thanks u save my life :)
Raj says:
Hi,
I was looking for a pagination and your example seems to be working good.
But i wanted to also display the page numbers in the pagination and dynamically change number of items to be displayed per page.
Can you let me know the customizations to be made.
Thanks
Raj
Benjamin says:
Woah. This is awesome. Simple. Perfect. Thanks Mark!
George Katsanos says:
Hello, just a quick question, is it possible to add some Fadeout/Fadein effects so that it seems more animated?
thanks
George Katsanos says:
oh and last but not least, is it possible to style the numbering with images and the like?..
steven dobbelaere says:
This makes it so much easier to integrate pagination. I used to do this with php but
was quite a hassle. The only problem I have is that the counter doesn’t appear.
I just hope I can fix this.
Great work!!!
Dustin says:
Great plugin!
How would you go about refreshing the content which is paginated?. I have attempted to use setInterval/setTimeout when a form is submitted to refresh the parent that contains the paginated results, however doing so removes the pagination or does so after an interval (5000) when set.
So far using this plugin in conjuction with some PHP that retrieves my results is awesome, it’s just getting that container element to refresh, keeping the pagination.
hope to hear back, thanks!
Chris Cagle says:
Hi Mark! I think this plugin will fit in great with my new CMS GetSimple – http://get-simple.info/
One question though… will this work on paginating a table’s rows? I am assuming this would do the trick…
jQuery('table.paginate tr').quickpaginate( { perpage: 20, showcounter: false } );Thanks again!
Mark says:
@Dustin – There is no way to refresh the pager to represent updated content at present, but it would definitely be good to have. I’ll try and add it in when I have a spare minute.
@Chris Cagle – I actually haven’t tested it on table rows yet, sorry ;-) I am currently working on a new version of the plugin which certainly will, but if you want to test the current version out and let me know if you have any luck then that would be great.
Otherwise I’ll let you know when the new version finally gets finished!
Dustin says:
@Chris Cagle
I use it within table rows, and it seems to work fine. Each of my rows is generated by PHP, and then I use the pagination to works like a charm
ZeB says:
Excellent plug-in, and more than easy to implement !
It just miss something : “First Page” and “Last Page” links.
Thanks for your great work :^)
Chris Cagle says:
@Dustin & Mark – it works flawlessly with paginating table rows. Thanks for this great plugin!
Pablo says:
Wow, im astonished by the simplicity and effeciecy of this plug-in, how come i did not found it on the jQuery site… anyways
Im a building commenting system for my site and i will use this to paginate the comments…
Dustin says:
For anyone wishing for a temp. fix for refreshing the results generated from a php file, here is what I do
after doc ready
var=refreshId = setInterval(function()
{
$(‘#div’).fadeOut(“fast”).load(‘your/php/file.php’).fadeIn(“fast”);
}, 60000);
this refreshes the div element every minute, ensure the .quickpaginate function is set at the top of the php file and you should be fine.
Dustin says:
oops typo on my part
should be
var refreshId = setInterval
not
var=refreshId = setInterval
Liam Dilley says:
Can anyone help to identify this issue?
http://smetax.corecms.co.nz/reports/
It works but for every item it id displaying the pagination controls. This a 1.3 issue?
Mark says:
Hi Liam, I have had a bit of a play around with your page and it seems to be some problem with the lazy loading of the pagination script – if you don’t lazy load it but rather include it normally then it seems fine (or it is for me!).
Not sure why this is, will try and look at it more at some point but perhaps you can give non-lazy-loading it a try and let me know how you get on?
Omer says:
Hello,
Great Plugin .. saved me alot of trouble. it was exactly what iam looking for.
you can see it here. it’s in the news section and 2 more parts but you need to login
http://www.wowcontender.com/
I have a question though. Iam loading some content with ajax using jquery $.post
and Iam trying to use you the quickpaginate plugin with this content. but it fails..
Iam not sure what to do .. I don’t know if i should use livequery and where should i do or if there’s another better solution for that.
Thanks for the plugin and I hope you can help me with this one too :)
Eric says:
This is a great, simple, little plugin, thanks!
One request — is there a way to add an option so that if you are scrolled down the page, the Next and Previous links bring you to the top of the page when clicked? This would help out a lot on pages with longer lists of content like I’m working with right now. Thanks!
Leo says:
Great plugin, I am using it in my SharePoint site.
Question is: where I could find css for it. I want to set prev and next to ‘gery’ and even disabled, but can’t find any css from your download.
Please advice
Leo says:
Oh yeah! I fixed my fisrt page and last page disabled issue, just add a css as:
.qp_disabled {
visibility: hidden;
}
and it works well.
Leo says:
Another thing:I suppose it should have a css file for its style, but can’t find it anywhere. Someone could advice it?
I am asking that since I noticed once I click <
Travis says:
Is there a reason why the Previous/Next classes are “reversed” from their names?
kilinkis says:
how can we change the buttons text?
i want change the text to something like “next 5″ or whatever
can we do it?
and what about adding some animations? how can we approach?
thx in advance!
Ken Phan says:
Hello !
If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.
Travis Holliday says:
Hi – Great plug in!
One Issue – I’m displaying three DL’s per page – each has it’s own ‘read more’ link at the end. The last DL per page has double ‘read more’ links. So, when a user clicks on it it shows the wrong information.
I can point you to the page in question if you are interested.
Thanks for a great plugin!
Mark says:
Hi Travis – If you could post a link to the page (or email me it if you prefer) I can have a look for you and try and see if I can see what is causing the issue? Probably the easiest way!