jPaginate: A Fancy jQuery Pagination Plugin
Development November 17, 2009 by cody 71 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.
You might also like
-
Thumbnails Navigation Gallery with jQuery
-
Latest Tweets Tooltip with jQuery
-
Slide Down Box Menu with jQuery and CSS3
-
Beautiful Photo Stack Gallery with jQuery and CSS3
-
Latest Post Blogroll Slider with jQuery and PHP
-
Flickr Photobar Gallery
-
Fancy Sliding Form with jQuery
-
Sliding Checkbox Actions Menu with jQuery
-
Fresh Sliding Thumbnails Gallery with jQuery and PHP
-
Sliding Panel Photo Wall Gallery with jQuery
Discussion71 Join the discussion
Trackbacks
- uberVU - social comments
- jPaginate: A Fancy jQuery Pagination Plugin | Codrops « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
- jPaginate - interessante “Pagination”-Variante mit jQuery | tagdocs.de
- ??????? » [Web] ????
- 20 Plugins para jQuery | Renan Lima
- Stephan Sokolow’s Blog » SQL Pagination Without OFFSET
- jQuery plugins for forms | WebDesignExpert.Me
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
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.
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
very nice page navigator
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
Hello, Buddies!
I am also confused, will anybody help us how can we use it with PHP + MYSQL?
Thank you.
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.
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.
Hi Glenn, thanks a lot! I will fix that bug.
Regards
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.
I’d also like to see if this can work with already existing markup?
This plugin is great.. however how many times will you really have a static page count?! Is there a way to set the ‘Count’ property dynamically (on page load)?
Any way to add a “timer” to this plugin? I’d like the elements to auto-rotate on a timed basis?
http://img33.imageshack.us/img33/6649/bugmnk.png
Hi, I am having this issue on Google Chrome 5, firefox 3.5 and IE8. Just there is Jquery UI (dialog) plugin on the page but i tried also without UI but didnt work again. is this easy to fix thing ?
thanks
Hi..great work…but how to make it right align?
I would like some information or tutorial on how to use this plugin with a result set from a PHP MySQL interaction.
Thanks!
Thanks for the amazing script!
Does anybody know if there is a way to display two copies of the pagination links (one above the content, and one below)?
I know you can just change “div id=” to “div class=”, which will allow you to place multiple copies on the page. *However*, doing that won’t cause them to update each other.
In other words, if you click “page 2″ on the top copy of the pagination links, how do you get the bottom copy to update itself (instead of remaining on the last number clicked by that particular copy)?
Thanks for any help!
I had just used your jpaginate script but I want to keep two pagination like demo 5 but it doesnot work I had copied demo 5 and make it into demo 6
Demo 6
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
$(“#demo6″).paginate({
count : 10,
start : 1,
display : 7,
border : true,
border_color : ‘#fff’,
text_color : ‘#fff’,
background_color : ‘black’,
border_hover_color : ‘#ccc’,
text_hover_color : ‘#000′,
background_hover_color : ‘#fff’,
images : false,
mouse : ‘press’,
onChange : function(page){
$(‘._current’,'#paginationdemo’).removeClass(‘_current’).hide();
$(‘#p’+page).addClass(‘_current’).show();
}
});
But it doesnot work can any one help why it getting problem do I need to change on any other place too
you can actually pass vars from php into the script so like count could change and you can query the information to fit inside the pages…
Does any one know how to show 2 Pagination {demo 6} on same page . I had tried but doesnot function well. Please help if any one know
How to use this with php+mysql.
Help needed urgently!!
what is your question with php and mysql and this?
Thank God I got problem solve . No need any comment regards my issue
Yes i got it to totally work with php and mysql having some css issues with the numbers div at the bottom but other than that it completely works fully just need to have things line up better on the bottom… could be something i have going on in the other css i have on the site conflicting with it …
for those of you wondering about the count and changing it dynamically with php based on number of records in database
$(function() {
$(“#demo5″).paginate({
,
start : 1,
display : 7,
border : false,
text_color : ‘#FFB442′,…..
}
});
});
sry
$(function() {
$(“#demo5″).paginate({
/*php*/ print “count:$maxPage”; /*end php?*/,
start : 1,
display : 7,
border : false,
text_color : ‘#FFB442′,
@ebaretta, your solution is a little great but, what if I have the JS in an outside script included ?? And better yet; I’m withing a template Engine, so I can’t [And I don't want to] make any echo nor print inside my HTML templates … Any other idea to fill the ‘count’ value ?? Anyone else ?? I read around making a callback, but as far as I know that would be resulting in making the DDBB query twice, one for the results display, and another for grabbing the total rows …
I did the callback to set the ‘count’ value but doesn’t seems to work. I have this:
count: function(){
$.get(“myScript.php”, function(r){
return r;
});
}
Any help ?? Thanks
This plugin is a GPL license?
Great, thanks
http://www.ajaxshake.com
Hi Everyone,
Let me first say, what a great plugin to work with. However the documentation is hard to find and I had to spend a whole day trying to figure out how to run this with php.
I am posting what I did for everyone’s benefit:
Scenario:
I have a simple php page with a page no parameter passed via query string.
lets say it is like this test.php?page=1
First I would put php code to set start parameter from static to dynamic like start :
Now I fetch the querystring parameter via decodeURI(location.search).
I add a simple redirect function at the end of this line
$(‘#p’+page).addClass(‘_current’).show();
submitForm(url);
This function simple has a location.href(url) call.
If you still have problems in running this excellent plug in please drop me a message at umair.pervez at gmail.com
Thanks.
Since I’m enjoying using this plugin I would like to contribute with a small snippet.
Besides other changes I’ve made there’s one that might be useful to others.
First and Last links are initiated even if page is first or last. To avoid unnecessary ajax calls I’ve added 2 lines:
_first.click(function(e){
if($(‘/../../ul.jPag-pages li:first span’,this).length>0)return;
…
and
_last.click(function(e){
if($(‘/../../ul.jPag-pages li:last span’,this).length>0)return;
…
It’s using relative paths so it wont conflict if you have more than one pagination on same page.
I’ve found a small bug in the css of the plugin. On the javascript, you create the pages inside a div, but it is not styled on the css file, and if someone places a default css for the divs of the page (for example margin-left:auto and margin right:auto), the pages appear broken. So you should add this to the css file of the component:
.jPaginate div{
margin:0px;
}
Another thing i found is missing is the ability to set a custom “first” and “last” label values, so we can show the pager in other languages.
Great component by the way!!
Great Script and excellent resource. Thanks very much.
Sudeep
infovinity
Hi there! Thanks for this wonderful script.
I have a quick question for you…, How do I load my data thourough a PHP script. I have a php script that spits an ID & Name of some students. My question is how do I use this plug-in along with my script.
Thanks,
Nat
That is a great pluggin! Thanx!
But problem is that if the number of pages are BIG, it is slow :-((( I have 292 pages (2920 records) and the pagination draws all of them and hides them for it to work I guess. Problem is 292 lists is sloooww ;-(
Any chance to implement a better way for many pages?
Or history support maybe?
Yours
Jerry
Hope this will help :)
$(function() {
$(“#pager”).paginate({
count : 10,
start : 1,
display : 7,
border : true,
border_color : ‘#fff’,
text_color : ‘#fff’,
background_color : ‘black’,
border_hover_color : ‘#ccc’,
text_hover_color : ‘#000′,
background_hover_color : ‘#fff’,
images : false,
mouse : ‘press’,
onChange : function(page){
location = $(‘#id’+page).find(‘a’).attr(‘href’);
}
});
});
…
Why I cannot paste html code???
Wanted to add that you have to echo in php links wrapped in div with id=id1 where 1 is the number of page. These divs have to have style display none.
hi
i tried to install and recalll $(elementID).paginate()
in joomla but it didn’t work
any ideas?
regards
Hi, Thanks for the great plugin! But I have an issue. When I try to center align the div that contains the pagination, the markup gets messed up. Tried wrapping it with another div and center aligning that div, same problem. At last used a center aligned table and placed the div inside that, this time it worked. But another issue arose when the number of pages are less then 3. Again the markup gets messed up. Can you please provide a solution to this?