From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Message from TestkingLearn the basics of jquery using sun tutorials. Download SY0-201 dumps to learn how to create jQuery plugins and pass your ccnp exams on first attempt.
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?
@Shoeb ,
I ran into this same problem and finally figured it out.
The trick is to add one line of code to the applystyle function:
$this.css(‘width’, outsidewidth_tmp +’px’);
Then in your stylesheet, set margin:0 auto; on the element you are creating the pagination on.
So for clarity, here’s what the changes look like:
$.fn.applystyle = function(o,obj,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright){
obj.find(‘a’).css(a_css);
obj.find(‘span.jPag-current’).css(hover_css);
obj.find(‘a’).hover(
function(){
$(this).css(hover_css);
},
function(){
$(this).css(a_css);
}
);
obj.css(‘padding-left’,_first.parent().width() + 5 +’px’);
insidewidth = 0;
obj.find(‘li’).each(function(i,n){
if(i == (o.display-1)){
outsidewidth_tmp = this.offsetLeft + this.offsetWidth ;
}
insidewidth += this.offsetWidth;
})
_ul.css(‘width’,insidewidth+’px’);
$this.css(‘width’, outsidewidth_tmp+’px’);
}
I haven’t tested it much, so I’m not sure if it’s consistent across browsers, but worked in Firefox just fine. Hope that helps someone else.
searching for this for long time. thanks for sharing
I think that would be helpful
$(function() {
$(“#demo1”).paginate({
count : ,
start : ,
display : 16,
border : false,
text_color : ‘#888’,
background_color : ‘#EEE’,
text_hover_color : ‘black’,
background_hover_color : ‘#CFCFCF’,
mouse : ‘press’,
onChange : function(page){
location = ‘list.php?page_no=’+page;
}
});
});
had changed the script and implement it to my need. jpaginate edit, add a link and dclare an ajax function to show me pictures of 5 in 5. I work well when paged, but to click to page 5, 6, 7, 8, removes the link with the function.
it can help me please. I’ve been all day trying to give solution to my application.
sorry if my english is not understandable.
Hi I was wondering how can I do to have two instances of the paginator; and have consistency between them. That is, if i change the page number in one, and the page actually changes; then the other paginator should show that page number selected in the other instead of keeping the old one. Any ideas ?? Maybe in the change callback ?? But don’t know how to identify each one …
I know that part of this paging system is the cool slide effect of the page numbers, but can it be turned off?
Let’s say there are 15 pages returned, showing 5 at a time. Can it be made that when next arrows are clicked, pages 6-10 are shown, then 11-15 etc.. instead of the constant sliding action? Same for previous, if currently viwing pages 6-10, prev would show pages 1-5
I don’t mind the sliding, even if it used the sliding effect to show the next or prev 5 pages and stop that’s fine too.
Any ideas? thanks!!
It doesn’t work when I set count 10000,I hope it can be better!
Hello, I was wondering how i can localize the text of ” First” and “Last ” button ?
i don’t see properties to configure it .
Thanks for your help !
Hi,
Pagination control is very slick and good.
It is design for Left to Right representation but if we want to represent it in Right to Left notation then
Is there any option is available to represent same plug in Right to Left notation?
It would be nice if once a page were clicked, all ‘paginators’ were updated to the clicked page. I hacked a way to do it in the onChange function:
$(‘.jPag-current’).each(function(){
if($(this).html() != page){
$(this).parent().siblings().children().each(function(){
if($(this).html() == page){
$(this).trigger(‘click’);
}
});
}
});
@deepak and @goldlilys – the problem is not in jquery UI – it’s in the way the pagination script generates its properties. If it begins as hidden (or display: none) on the page, it will not generate the correct css. Is there a way to force the jPaginate class to regenerate once it is visible?
Look at the demo5 code.
Now let’s change the parameter ‘start’, for example, let’s use the value 4.
Let’s run the page.
The script tells us, that page 4 is selected, but it still displays page 1.
Do you have an idea how to fix this bug?
is thar a possibility to make this great script vertical?
Any updates with IE9? The last page number gets moved to a newline.
great plugins..
I was searching for this…
thank you…
Hi,
Great script but one thing is missing..
One should able to call select button from javascript. e.g. If I want to display pagination one top as well as on bottom of page and some body clicking one page no, I have to update other pagination selected button…
Best Regards,
Rahul.
I’m having the page wrap display problem in IE9 too. I had it in Firefox too, but then I switched pages and back and it went away and now I can’t get it to do it again. A fix for this would be GREATLY appreciated. I’ll dig into it more tomorrow to see if I can find a workaround. I’m guessing it’s something with padding.
I have a fix for the wrapping page issue in IE9. At least, it works for me and every test case I can think of for my application. I can’t guarantee it will work for everyone.
Change line 245 of jquery.paginate.js from:
insidewidth += this.offsetWidth;
to
insidewidth += this.offsetWidth + 1;
Hope that helps someone.
Hello Cody,
How can i destroy an jPaginate instance?
Look:
$(#div).paginate(“destroy”);
Is this correct?
Ingrid Brandão
Great work, Thank you very much
But
If the direction from right to left does not work.
“CSS code” Example:
direction: rtl;
Especially those who use the Arabic language
I wish to clarify that
Thank you
Fantastic plugin. Really really helpful.
I do however have a question… One of my scripts allows for AJAX based filtering of results so, as a user is browsing, they can easily add price ranges or the like.
Problem is this can result in changes to the number of pages.
I have tried reloading the jpaginate query [under a different ID of course] but it does not load unless the entire page is refreshed. Does anyone know of a way to update the page counts and reset the current page based on other changes to the page?
I am using json to pull back the results so I can easily pull in the total number of pages as well.
My problem is related to the first time i am submitting the form using the jquery ajax. If is not submitting the form first time or you can say it is not calling the action first time. second time when i am clicking the same no. it is submitting the form and able to get the approprate result. I am not sure why i am getting this.
Please help me.
I’ve found a bug and i don’t know how to deal with it.
When you create a pagination with 3 or less pages the page links’ wrapping breaks
Nice effort – it’s a shame it can’t be centered properly. I tried the workaround posted in the comments and it generally works but not when you dynamically update it with Ajax calls – it breaks after going from 4 pages to 1 page and then back to 4 – the width calculation fails. I also see that all the examples are fully left aligned so I assume it’s tricky to solve.
how can we make the page go to the top?
clicking from one page to next does not take the page to the top…
any clues?
thanks
Hi guys right now am creating a paginated webpage with around 100 products in it. i used demo5 version of this jpaginate to display one product with details in one page. But am having a another HTML file which is bunch of all product list. I need to know when i click some product eg. “product7” its in slide 7(means pagination 7) it has to directly go to that page and i can able to change the pagination if i wanna see other products too. pls guys help me with a script
(Note. am not using any php or asp with my website am just using HTML and i implemented with this jpaginate)
Awesome pagination with nice code,
Thanks.
thank u cody.. : )
Thank you for the Fix, Bodie.
But the better IE-Fix is this:
Change (~)Line 250 to:
_ul.css(‘width’,insidewidth + 1 + ‘px’);
And if you want the pagination with align right-possibility, than add the following at Line 9:
// Set the width
var naviWidth = 0;
$(this).children(‘div’).each(function(i){
naviWidth += $(this).outerWidth(true);
});
$(this).css({‘width’: naviWidth – parseInt($(this).css(‘paddingLeft’).replace(‘px’,”)) + 9 + ‘px’});
So the width of the pagination will be calculated 🙂
Hi, I have download this plugin & try to install in my joomla website but receive following Error
“Could not find an XML setup file in the package” is it suitable for joomla 1.5.23?
can anyone tell me what steps i need to take for pagination in joomla website.
Thanks & Regards
Syed
I am trying to do a simple example using the plugin just to see how it works.
I am seeing that all the page numbers are vertically aligned. I don’t see any property I can set to it to change it orientation to horizontal. Below is the code I am trying to use.
I am also wondering how to set the inside width for the page numbers. Help would be greatly appreciated. Thanks!
function loadPagination(){
$(paginateElement).paginate({count : “52”, start : 1, display: “5” , text_color : “white”, background_color : “black”, border_color : “black”, text_hover_color : “black”, border_hover_color : “black”, background_hover_color : “white”, mouse : “press”});
}
HPC Grid Usage Statistics
Any fix for ‘count’ problem? ( as stated by (TED S) )
Thanks.
I love this plugin so much but I use mysql/php to store all of the movie info on my site. I am new to all of this and have been desperately trying to follow along — been researching how to combine php and this plugin for about 15 hours now — and find you are all far more advanced.
I really need help. I know for the right person it would take just a few minutes to get it working for me.
Any do-gooders out there?
Please take a look at my site http://www.bestadventuremovielist.com the navigation is at the bottom and all pages are unlinked because I just can’t figure it out:(
Please comment back or leave an email!
Thank you.