jPaginate: A Fancy jQuery Pagination Plugin
November 17, 2009 | by cody | jQuery | 34 Comments
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
You can call the plugin in the following way:
$(elementID).paginate()
You can configure the plugin with the following properties:
- count: The total number of pages
- start: With which number the visible pages should start
- display: How many page numbers should be visible
- border: If there should be a border (true/false)
- border_color: Color of the border
- text_color: Color of the text/numbers
- background_color: Background color
- border_hover_color: Border color when hovering
- text_hover_color: Text color when hovering
- background_hover_color: Background color when hovering
- images: If the arrows should be images or not (true/false)
- mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
- onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.
Social comments and analytics for this post…
This post was mentioned on Twitter by codrops: jPaginate: A Fancy jQuery Pagination Plugin | Codrops: http://bit.ly/2IdvTF…
[...] jPaginate: A Fancy jQuery Pagination Plugin | Codropstympanus.net [...]
[...] oder eine Combobox mit allen Seiten anbieten), aber eine weitere relativ nette Variante bietet das jPaginate PlugIn für [...]
Well, again amazing script and example. You are great!
Thanks
great work man!
one question:
how update count when onChange is called? because perhaps the count may change
Hi,
I am not sure if I understood your question, but you don’t need to update the count since the onchange just makes the current page to change.
but, if the time i click the next page, the total number of pages changes.
i got another problem: pager cannot display correctly.
i.e.
… any elements…..
…
$(”#pager”).paginate(myOpt);
There are some classes in the wrapper div of pager, which cause pager cannot display correctly. the pager displays vertically (i dont know which css style, but it dose happen in my case ).
i am not sure if it’s jPaginate css problem?
something like:
[first][last]
[1]
[2]
…
[100]
$(”#demo1″).paginate({
count : 7351,
start : 1,
display : 8,
……..
hi,i got a problem like front code,i think it`s a bug
try run the code with count>=7351
[...] jPaginate: A Fancy jQuery Pagination Plugin [...]
hi, i really want this feature:
update current page programmatically.
help!
anyone tried?
Cool script! Thanks.
gembin, what do you mean programmatically ? The page is being updated when you click on it ?
yes, the page(div exactly which contains jPaginate) is created dynamically when i click on it.
Hi there –
Cool plugin, thanks! I see a small display issue in Firefox (but not safari) — take a look on your Demo page (#5) — the “10″ is hanging off the bottom of the list… any fix for this?
http://tympanus.net/jPaginate/
Looks like bumping out the inside width by 5px or so fixes the issue:
insidewidth = 5; (before the loop figures out how large it needs to be).
this is on Firefox 3.5.5 on OS X 10.6.2
Thanks again for a great plugin.
Thanks Matt!
I see that happens because of the font-weight of the current page. I will try to solve it. For now I just put the same font-weight for all the pages and it seems to works fine.
greetings
I’m experimenting with your script for my site http://goldlilys.110mb.com/Goldlilys/anime.html and it seems to only work correctly when there’s only one instance of it on a page.
For some reason, the controls doesn’t calculate the width correctly for the rest. When I use firebug, the 2nd pagination doesn’t display the width factor and hence the pages are vertically aligned instead of next to each other.
Other than this bug, it’s a great plugin.
There’s also some issues with IE, but that would be 2nd priority.
Thanks.
Hi,
I am seeing that there’s a problem calculating the values for paddings and widths. I am not sure what can be wrong. I would say you have some conflit with your other scripts. As you can see in this demo page you can call several instances of the jPaginate and all of them work, so I wouldn’t say that is the problem.
If there’s some conflit with your scripts, I would say it’s with the script that makes the tabs show/hide. Just try if you can, to make the first 2 tabs (currently watching and action/adventure) be expanded by default and see if it works. if that’s the case, then you shouuld maybe call the paginate each time you expand a tab. I am not sure though…
greetings!
Figured there’s something wrong with jQuery UI accordion. Thanks for helping and good job on this plugin. Will be using it once I figure out the problem.
First off – thanks for the great plugin! I’ve a encountered a display issue in all major browsers. If in the decleration of the plugin I, for example, assign 1 to ‘count’, and 15 to ‘display’, the link ‘Last’ moves over to the left (should be right of course) and overlaps the link ‘First’, resulting in an illegable mess. This applies if ‘count’ is less than ‘display’ by any amount.
Hi, thanks!
Well, why would you do such a thing? :) You know that “count” needs to be bigger or the same value as “display”. Anyway I changed it and uploaded the new version in order to avoid that situation.
greetings
It’s set like that because the ‘count’ property is populated dynamically via an Ajax request, whilst the ‘display’ property remains static at 15. At the moment there aren’t many records, and thus not many pages (1 to be exact). Anyway, thanks for the fix, it’s working as intended.
Greattise
rfpd
Hi, great job!
But.. How can i change the page selected in two paginators simultaneously?
Hey thanks so much for this script. It works fine now … at least as much as I want it to (there is still that IE problem as you can see here >> http://goldlilys.110mb.com/anime.html) Haha but just hoping that people will stop using IE and use Firefox or Chrome instead. Anyways, WONDERFUL JOB!!
Hi,
I am appliying pagination for the diffrent tab,for first tab it work great but for other tab pagination display vertical.I think goldlilys was facing the same problem.Please let me know the resolution as it is critical
@deepak:
There is nothing wrong with cody’s script. If you’re using jQuery UI tabs or accordion, there is something wrong when you have links (a tags) inside it. When you add this pagination script, its recognized as part of the accordion or tabs section and messes with the aligning.
My solution is to NOT use jQuery UI with this script at all. I’m sure you can find another way to do tabs.
[...] jPaginate – De apelo visual e muito divertido, este plugin dá um efeito de transição na [...]
hello all !
I think this plugin can implement to my plugin jpager. Also next version, i will implement it to my plugin.
Check plugin jPager here url: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
Difficult for you to read that article, pls using Google Translate to translate to English language. (that site is the Vietnamese language).
Download it here: http://kenphan.info/download/jpager.rar
Thanks all
[...] doing that, I also ran across jPaginate (demo), a jQuery pagination plugin that, as long as you provide a gracefully-degrading fallback, is [...]
very nice page navigator
[...] jPaginate – fancy jQuery pagination plugin – Link. [...]