jPaginate: A Fancy jQuery Pagination Plugin

Development November 17, 2009 by cody 40 Comments

jPaginate

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.

View demo Download jPaginate

Tagged with: jQuery, paginate, Pagination, plugin, sliding

Discussion⁴⁰ Join the discussion

Michael
November 20th, 2009 at 16:01

Well, again amazing script and example. You are great!
Thanks
gembin
November 23rd, 2009 at 03:30

great work man!
gembin
November 23rd, 2009 at 09:10

one question:
how update count when onChange is called? because perhaps the count may change
cody
November 23rd, 2009 at 09:33

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.
gembin
November 23rd, 2009 at 15:50

but, if the time i click the next page, the total number of pages changes.
gembin
November 23rd, 2009 at 16:24

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]
conntsing
November 27th, 2009 at 03:29

$(”#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
gembin
November 30th, 2009 at 10:18

hi, i really want this feature:

update current page programmatically.

help!
anyone tried?
Darko
November 30th, 2009 at 11:16

Cool script! Thanks.

gembin, what do you mean programmatically ? The page is being updated when you click on it ?
gembin
December 1st, 2009 at 03:38

yes, the page(div exactly which contains jPaginate) is created dynamically when i click on it.
Matt
December 3rd, 2009 at 17:15

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/
Matt
December 3rd, 2009 at 17:27

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.
cody
December 3rd, 2009 at 17:59

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
goldlilys
December 5th, 2009 at 08:00

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.
goldlilys
December 5th, 2009 at 08:21

There’s also some issues with IE, but that would be 2nd priority.

Thanks.
cody
December 5th, 2009 at 09:50

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!
goldlilys
December 6th, 2009 at 04:30

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.
rick
December 9th, 2009 at 14:35

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.
cody
December 9th, 2009 at 14:45

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
rick
December 9th, 2009 at 15:58

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.
neapeclagegef
December 14th, 2009 at 20:47

Greattise
rfpd
DX
December 21st, 2009 at 03:31

Hi, great job!

But.. How can i change the page selected in two paginators simultaneously?
goldlilys
January 3rd, 2010 at 21:29

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!!
deepak
January 5th, 2010 at 06:42

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
goldlilys
January 6th, 2010 at 04:51

@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.
Ken Phan
January 9th, 2010 at 10:27

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
jdsans
January 18th, 2010 at 23:58

very nice page navigator
Alvaro
February 9th, 2010 at 20:15

Hi,

How could be this one used with PHP+MySQL? I mean, how should I modify

onChange : function(page){
$(’._current’,'#paginationdemo’).removeClass(’_current’).hide();
$(’#p’+page).addClass(’_current’).show();
}

to make a call to my php page which loads the data?

Thanks for this one! It’s really nice
Khalil
February 13th, 2010 at 22:05

Hello, Buddies!

I am also confused, will anybody help us how can we use it with PHP + MYSQL?

Thank you.
Glenn Gervais
March 1st, 2010 at 16:10

IE8 wraps the last number onto another line. This can be seen in Demo 1 and Demo 2. The issue appears whether or not you’re in compatibility mode.
Glenn Gervais
March 3rd, 2010 at 02:49

To fix the IE8 issue that causes the last number to wrap, change the line at the bottom of jquery.paginate.js from:

_ul.css(’width’,insidewidth+’px’);

to:

if(ver == ‘ie7′) _ul.css(’width’,insidewidth+8+’px’);
else _ul.css(’width’,insidewidth+’px’);

Note that you may have to tweak the 8 depending on your stylesheet.
cody
March 3rd, 2010 at 21:49

Hi Glenn, thanks a lot! I will fix that bug.
Regards
Anton Andreasson
March 4th, 2010 at 09:59

Is there any way I could use existing markup for this plugin? I’m aiming at using it for a horizontal calendar type of thing, with clickable days, and I must have a fallback where the links work without JS.