jPaginate: A Fancy jQuery Pagination Plugin

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’,…..
}
});
});

@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 …

This plugin is a GPL license?

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.

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!!

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

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’);

}
});
});

…

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, 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?

searching for this for long time. thanks for sharing

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.

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!!

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 !

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’);
}
});
}
});

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?

Any updates with IE9? The last page number gets moved to a newline.

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 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.

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

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.

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.

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)

thank u cody.. : )

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

Any fix for ‘count’ problem? ( as stated by (TED S) )

Thanks.