Making a jQuery pagination system

For paginating purpose PHP seems like a logical solution, but if you don’t have a huge amount of data you want to paginate, i would suggest paginating with jQuery. It’s not hard at all, and in this tutorial we will make a jQuery pagination system.

Why paginate with jQuery?

it’s much much much faster

doesn’t make a database query for each page

easy to implement

and again…much FASTER then PHP

Why NOT paginate with jQuery?

Well the only the reason not to paginate using javascript is that there is a possibility that javascript is turned off in the browser of the user…but that’s a really small possibility.

Let’s start…

HTML

	<!-- the input fields that will hold the variables we will use -->
	<input type='hidden' id='current_page' />
	<input type='hidden' id='show_per_page' />

	<!-- Content div. The child elements will be used for paginating(they don't have to be all the same,
		you can use divs, paragraphs, spans, or whatever you like mixed together). '-->
	<div id='content'>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		<p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>
		<p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>
		<p>Pellentesque ac sem ac sem tincidunt euismod.</p>
		<p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p>
		<p>Nullam in nisi sit amet velit placerat laoreet.</p>
		<p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p>
		<p>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</p>
		<p>In non eros eu lacus vestibulum sodales.</p>
		<p>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</p>
		<p>Proin ullamcorper est vitae lorem mollis bibendum.</p>
		<p>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</p>
		<p>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</p>
		<p>Maecenas lacinia lectus ac nulla commodo lacinia.</p>
		<p>Maecenas quis massa nisl, sed aliquet tortor.</p>
		<p>Quisque porttitor tellus ut ligula mattis luctus.</p>
		<p>In at mi dolor, at consectetur risus.</p>
		<p>Etiam id erat ut lorem fringilla dictum.</p>
		<p>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</p>
		<p>Pellentesque quis magna vitae quam malesuada aliquet.</p>
		<p>Curabitur tempus tellus quis orci egestas condimentum.</p>
		<p>Maecenas laoreet eros ac orci adipiscing pharetra.</p>
		<p>Nunc non mauris eu nibh tincidunt iaculis.</p>
		<p>Ut semper leo lacinia purus hendrerit facilisis.</p>
		<p>Praesent et eros lacinia massa sollicitudin consequat.</p>
		<p>Proin non mauris in sem iaculis iaculis vel sed diam.</p>
		<p>Nunc quis quam pulvinar nibh volutpat aliquet eget in ante.</p>
		<p>In ultricies dui id libero pretium ullamcorper.</p>
		<p>Morbi laoreet metus vitae ipsum lobortis ultrices.</p>
		<p>Donec venenatis egestas arcu, quis eleifend erat tempus ullamcorper.</p>
		<p>Morbi nec leo non enim mollis adipiscing sed et dolor.</p>
		<p>Cras non tellus enim, vel mollis diam.</p>
		<p>Phasellus luctus quam id ligula commodo eu fringilla est cursus.</p>
		<p>Ut luctus augue tortor, in volutpat enim.</p>
		<p>Cras bibendum ante sed erat pharetra sodales.</p>
		<p>Donec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet.</p>
		<p>Vestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum.</p>
		<p>Proin vehicula suscipit felis, vitae facilisis nulla bibendum ac.</p>
		<p>Cras iaculis neque et orci suscipit id porta risus feugiat.</p>
		<p>Suspendisse eget tellus purus, ac pulvinar enim.</p>
		<p>Morbi hendrerit ultrices enim, ac rutrum felis commodo in.</p>
		<p>Suspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae.</p>
		<p>Nulla sed purus et tellus convallis scelerisque.</p>
		<p>Nam at justo ut ante consectetur faucibus.</p>
		<p>Proin dapibus nisi a quam interdum lobortis.</p>
		<p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>
		<p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</p>

	</div>

	<!-- An empty div which will be populated using jQuery -->
	<div id='page_navigation'></div>

jQuery

$(document).ready(function(){

	//how much items per page to show
	var show_per_page = 5;
	//getting the amount of elements inside content div
	var number_of_items = $('#content').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);

	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);

	//now when we got all we need for the navigation let's make it '

	/*
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/
	var navigation_html = 'Prev';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += ''+ (current_link + 1) +'';
		current_link++;
	}
	navigation_html += 'Next';

	$('#page_navigation').html(navigation_html);

	//add active_page class to the first page link
	$('#page_navigation .page_link:first').addClass('active_page');

	//hide all the elements inside content div
	$('#content').children().css('display', 'none');

	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}

}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}

}
function go_to_page(page_num){
	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());

	//get the element number where to start the slice from
	start_from = page_num * show_per_page;

	//get the element number where to end the slice
	end_on = start_from + show_per_page;

	//hide all children elements of content div, get specific items and show them
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	/*get the page link that has longdesc attribute of the current page and add active_page class to it
	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

	//update the current page input field
	$('#current_page').val(page_num);
}

Final words

That’s it. I hope you like this tutorial, and if you didn’t understand some part of it just say so and i will try to further explain it.

Don’t Forget

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.

Check out my other blog, WpCanyon for WordPress tutorials, tips, tricks and many more.

76 Responses

melf

Oct 6th, 09

Putting functions into the global namespace isn’t considered good javascript practice.

Also http://plugins.jquery.com/project/pagination

Boba

Oct 6th, 09

That plugin is actually the reason why i made this. I didn’t like it much.

Coheed

Oct 6th, 09

This is disingenuous. Most things you want to paginate won’t be a handfuls of characters, and it’s completely impractical to paginate tons of content under the guise that JS is “faster” than PHP.

Boba

Oct 6th, 09

“Most things you want to paginate won’t be a handfuls of characters”
If i understood correctly, by this you mean that it’s not only text we want to paginate, right?
You can paginate anything with this script without changing anything in the jQuery. The child elements of #content are paginated, doesn’t matter which kind of elements.

“And it’s completely impractical to paginate tons of content under the guise that JS is “faster” than PHP.”

Why is javascript pagination impractical?

Kyle

Oct 6th, 09

Just found your site and really like it. This looks very useful. Thanks for the goods!

Boba

Oct 6th, 09

I’m happy you like it :)

If you want to see some special tutorial feel free to use the contact form and tell me what it is.

Nutts

Oct 7th, 09

http://plugins.jquery.com/project/pagination

The plugin above falls short of the mark with it’s flaw of not displaying more than one record per page. I am searching for the remedy but very few that actually understand Jquery are posting the solution. Your solution is perfect but I would rather see it not display all available pages at once but rather broken into sections such as “1 2 … 10 11 12 13 14 …38 39″. Could it be made to achieve this and if so, how?

Boba

Oct 7th, 09

Yea, even i am having that problem with the pagination plugin.

Thanks for reminding me about the page navigation, i will start working on it right now. The update should be available today. Also, i will probably make this into a plugin this week.

Nutts

Oct 7th, 09

Excellent! I look forward to it. Thanks.

Boba

Oct 8th, 09

@Nutts – Sorry, still developing it, you can take a look at it here http://tutsvalley.com/demos/paginate2/

Should be completely done tomorrow

Nutts

Oct 8th, 09

That’s the stuff dreams are made of right there. Hopefully it will knock that other plugin completely off the net. Thanks for all your efforts.

natz

Oct 13th, 09

Nice, i was doing a pagination with ajax and jquery, but didnt wanted to do a ajax for every pagination. Was thinking on something like you, hidding the content, but still thinking the how to, you helped me a lot.
My resources are like yours so i will try it tomorrow.

Boba

Oct 13th, 09

@natz – i’m happy this helped you

Ben

Oct 21st, 09

Hey nice tutorial, thanks for the comments as it’s helped me understand jquery better.

But it’s not actually quite what i want, I would ideally like content to be split once it’s a certain length as I’m using a fixed height. Do you know if there is a way to do this. What was wondering if either characters can be counted or maybe even if there’s a way of detecting if a scroll bar has become active or anyting. Do you know if there are any solutions like that out there.

Thanks again for the tutorial.

Ben

Boba

Oct 21st, 09

Maybe this will help you… :)

I will make a tutorial on that soon anyway.

ami

Oct 21st, 09

thx for da nice tutorial, can i use this in wordpress? so instead of reloading the whole page when users will click next it will show the next page of posts?

Boba

Oct 21st, 09

Yes it can be implemented in WordPress, but it’s not easy… :)

Pierre Boucher

Oct 22nd, 09

Hi,

Thank you for the code, very interesting and allowed me to understand jQuery a bit more.

Reviewing your code in order to adapt it for table browsing, I was able to fine tune the end of $(document).ready function by replacing the last three lines by a call to go_to_page(0). This my small contribution to an otherwise good code.

$(document).ready(function(){
//…

//add active_page class to the first page link
//$(‘#page_navigation .page_link:first’).addClass(‘active_page’);

//hide all the elements inside content div
//$(‘#content’).children().css(‘display’, ‘none’);

//and show the first n (show_per_page) elements
//$(‘#content’).children().slice(0, show_per_page).css(‘display’, ‘block’);

go_to_page(0);

});

Boba

Oct 22nd, 09

Glad to help.

Hmmm, that’s actually a very good idea :)

Pam

Oct 27th, 09

Well done. Thank-you for the comments. I’m a developer who prefers to read English. ;) I will revisit this site, again.

Boba

Oct 27th, 09

Thanks :)

Ash

Nov 3rd, 09

Great one man!
thanks

DeanE10

Nov 8th, 09

This is an extreme help with my current project, I really appreciate it! The only issue I am having is with the last page on your Demo2 as I needed the “…” that you have added.

It seems the last page (even in your demo) is counted when it shouldn’t be. Any thoughts on how to fix it?

Boba

Nov 8th, 09

@Ash – I’m glad you like it :)

@DeanE10 – Happy to be helpful. About the issue in the second demo it is still under development. There will be a new tutorial when it’s done. About the issue:

Line 67 or 68 (not sure because of some editing in the code), change it from “while(i < = number_of_pages)" to "while(number_of_pages > i)”

Line 74 or 75 “if(i == 1 || i == number_of_pages || (i >= start_range && i < = end_range))" change to "if(i == 1 || i == number_of_pages-1 || (i >= start_range && i <= end_range))”. Only the “number_of_pages-1″ part is changed.

I’ll make a nice little tutorial when i finish working on it :)

DeanE10

Nov 9th, 09

Boba,
Thanks, just what I needed! This is a wonderful addition to any library, great work.

In your tutorial, would it be too much trouble to make the page go to #1 instead of #2 when clicking on the last page number? (IE: in your demo, click on page 33 and on the left you will see Page #2 instead of page #1)

Thanks again Boba!!

Riyaz alam

Nov 13th, 09

Nice one..I am really fond of jQuery…

ProMo

Nov 22nd, 09

Thank you, great script!
Is there a way to get element by certain tag?
(let say span)

I want to use span contents as 1 element
ex. …..

$(‘#content’).children().size();

Boba

Nov 22nd, 09

@ProMo

$(’#content’).children(’span’).size();

ProMo

Nov 22nd, 09

Thank you Boba for your quick reply.

Yes i’ve tried that, but if you have DIVs or TABLEs or/and Ps inside span it’s not working. I need all span content as 1 element.

ProMo

Nov 22nd, 09

ok got it, i had the span tag inside a table :/

I’m starting to love jquery thanks to you :D

ProMo

Nov 24th, 09

You can add an input (let say hidden id=”perpage” with value=5) in your html an change the variable show_per_page to show_per_page = $(‘#perpage’).val();

Now you can control how many records per page will be displayed from you html.

John

Dec 3rd, 09

I like this but in apps where you are pulling back a few hundred records at a time with 100 records per page it seems like a large chunck of da

Boba

Dec 3rd, 09

@John – Wel yeah, with large amount of data that could be a problem, but for normal amount it’s perfect.
I will rewrite this tutorial soon with better navigation and a little solution for large amount of data… Stay tuned :)

Brandon

Dec 9th, 09

Hey, Just like everyone else, I could not get the pagination plugin from jQuery to work properly, so I found this. Good job. Just wondering how I can get this to work multiple times on a single page. I tried to create separate files corresponding to the id’s that hold the content, but that didn’t work. Any ideas?

Boba

Dec 9th, 09

@Brandon – Well that is a little issue, you can do it by copying the whole code and adding some suffix to the IDs,Classes and variables. If you are familiar with javascript that shouldn’t be a problem.

Anyway i am currently developing an improved version of this pagination, so the tutorial should be up by next Monday i think. If you want you can subscribe to the RSS Feed or follow me on Twitter (the links are in the footer) so you can know as soon as it goes live.

Cheers

Brandon

Dec 9th, 09

OK thanks, I look forward to the new tutorial. I’ll try to make due for now. Also, you should try to get jQuery.noConflict(); implemented as well. This is another problem I am having with the script (But I will figure it out).

Boba

Dec 9th, 09

What are you using besides jQuery? Prototype, earlier version of jQuery…?

The tutorial is coming next week for sure, but i will also work on a jQuery plugin which should be available next week or the week after.

Brandon

Dec 9th, 09

I was able to get jquery to work with other javascript, by replacing the “$” with “jQuery”. But now I am having trouble getting the pages to change on my second pagination section. I am sending it this code, maybe I am missing / replaced a variable I shouldn’t have? Here is the code:

jQuery.noConflict();

jQuery(document).ready(function(){

//how much items per page to show
var show_per_page_2 = 10;
//getting the amount of elements inside content div
var number_of_items_2 = jQuery(‘#content_2′).children().size();
//calculate the number of pages we are going to have
var number_of_pages_2 = Math.ceil(number_of_items_2/show_per_page_2);

//set the value of our hidden input fields
jQuery(‘#current_page_2′).val(0);
jQuery(‘#show_per_page_2′).val(show_per_page_2);

//now when we got all we need for the navigation let’s make it ‘

/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html_2 = ‘Prev‘;
var current_link_2 = 0;
while(number_of_pages_2 > current_link_2){
navigation_html_2 += ‘‘+ (current_link_2 + 1) +’‘;
current_link_2++;
}
navigation_html_2 += ‘Next‘;

jQuery(‘#page_navigation_2′).html(navigation_html_2);

//add active_page class to the first page link
jQuery(‘#page_navigation_2 .page_link_2:first’).addClass(‘active_page_2′);

//hide all the elements inside content div
jQuery(‘#content_2′).children().css(‘display’, ‘none’);

//and show the first n (show_per_page) elements
jQuery(‘#content_2′).children().slice(0, show_per_page_2).css(‘display’, ‘block’);

});

function previous_2(){

new_page_2 = parseInt(jQuery(‘#current_page_2′).val()) – 1;
//if there is an item before the current active link run the function
if(jQuery(‘.active_page_2′).prev(‘.page_link_2′).length==true){
go_to_page_2(new_page_2);
}

}

function next(){
new_page_2 = parseInt(jQuery(‘#current_page_2′).val()) + 1;
//if there is an item after the current active link run the function
if(jQuery(‘.active_page_2′).next(‘.page_link_2′).length==true){
go_to_page_2(new_page_2);
}

}
function go_to_page_2(page_num_2){
//get the number of items shown per page
var show_per_page_2 = parseInt(jQuery(‘#show_per_page_2′).val());

//get the element number where to start the slice from
start_from_2 = page_num_2 * show_per_page_2;

//get the element number where to end the slice
end_on_2 = start_from_2 + show_per_page_2;

//hide all children elements of content div, get specific items and show them
jQuery(‘#content_2′).children().css(‘display’, ‘none’).slice(start_from_2, end_on_2).css(‘display’, ‘block’);

/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
jQuery(‘.page_link_2[longdesc=' + page_num_2 +']‘).addClass(‘active_page_2′).siblings(‘.active_page_2′).removeClass(‘active_page_2′);

//update the current page input field
jQuery(‘#current_page_2′).val(page_num_2);
}

Boba

Dec 9th, 09

1)Does it work with the normal coding (without the suffix)?

2)Did you make the additional hidden input fields (eg. current_page_2)?

3)I think you don’t need the jquery no conflict when you use jQuery, because that’s the original, $ is only a substitute.

4)Did you also copy the css (with the suffixes)?

If you are working on a page hosted on internet give me the link so i can check it out and see if i can find the problem.

Brandon

Dec 9th, 09

Ok I have it all figured out, load times are ok, I won’t know until I optimize my code, but this takes like 5-10 seconds to load 200 records. I have the following code placed in a file called “jquery.pagination_1.js”. Each instance of this I want, I have another file, such as “jquery.pagination_2.js, etc” where the numbers “_1, _2, etc” are changed. Anyway, short term solution, but it is working. I replaced all the tags in the html with the numbers accordingly. Hope this helps other people out:

jQuery.noConflict();

jQuery(document).ready(function(){

//how much items per page to show
var show_per_page_1 = 5;
//getting the amount of elements inside content div
var number_of_items_1 = jQuery(‘#content_1′).children().size();
//calculate the number of pages we are going to have
var number_of_pages_1 = Math.ceil(number_of_items_1/show_per_page_1);

//set the value of our hidden input fields
jQuery(‘#current_page_1′).val(0);
jQuery(‘#show_per_page_1′).val(show_per_page_1);

//now when we got all we need for the navigation let’s make it ‘

/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html_1 = ‘Prev‘;
var current_link_1 = 0;
while(number_of_pages_1 > current_link_1){
navigation_html_1 += ‘‘+ (current_link_1 + 1) +’‘;
current_link_1++;
}
navigation_html_1 += ‘Next‘;

jQuery(‘#page_navigation_1′).html(navigation_html_1);

//add active_page class to the first page link
jQuery(‘#page_navigation_1 .page_link_1:first’).addClass(‘active_page_1′);

//hide all the elements inside content div
jQuery(‘#content_1′).children().css(‘display’, ‘none’);

//and show the first n (show_per_page) elements
jQuery(‘#content_1′).children().slice(0, show_per_page_1).css(‘display’, ‘block’);

});

function previous_1(){

new_page_1 = parseInt(jQuery(‘#current_page_1′).val()) – 1;
//if there is an item before the current active link run the function
if(jQuery(‘.active_page_1′).prev(‘.page_link_1′).length==true){
go_to_page_1(new_page_1);
}

}

function next_1(){
new_page_1 = parseInt(jQuery(‘#current_page_1′).val()) + 1;
//if there is an item after the current active link run the function
if(jQuery(‘.active_page_1′).next(‘.page_link_1′).length==true){
go_to_page_1(new_page_1);
}

}
function go_to_page_1(page_num_1){
//get the number of items shown per page
var show_per_page_1 = parseInt(jQuery(‘#show_per_page_1′).val());

//get the element number where to start the slice from
start_from_1 = page_num_1 * show_per_page_1;

//get the element number where to end the slice
end_on_1 = start_from_1 + show_per_page_1;

//hide all children elements of content div, get specific items and show them
jQuery(‘#content_1′).children().css(‘display’, ‘none’).slice(start_from_1, end_on_1).css(‘display’, ‘block’);

/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
jQuery(‘.page_link_1[longdesc=' + page_num_1 +']‘).addClass(‘active_page_1′).siblings(‘.active_page_1′).removeClass(‘active_page_1′);

//update the current page input field
jQuery(‘#current_page_1′).val(page_num_1);
}

Boba

Dec 9th, 09

Thanks, it sure will help others while i finish up the new version.

Clark

Dec 17th, 09

Hey, just wondering how I can dynamically update the the pagination since I have filtering options that allow the user to remove any content and display what they are looking for. In other words, they can reduce the content down to 5 articles out of the 20 but there are still 4 pages where there should only be 1.

Im guessing I would need to do something with these two lines:
var number_of_items = $(‘#content’).children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);

Any idea on how to accomplish this?

P.S. Thanks for the tutorial.

Boba

Dec 17th, 09

Haven’t thought about that when i made this :)

Try this:

1) All code that’s currently inside $(document).ready(function(){ THIS CODE }); remove it from there and place it in function paginateIt() { CODE HERE }

2) In the $(document).ready(function(){ HERE }); put paginateIt(); so you call the function.

3) When the content reduces, i believe it’s made with jQuery, just call the paginateIt() function again.

That should work but i didn’t test it. Let me know the result.

You’re welcome :)

Clark

Dec 17th, 09

didn’t seem to work, perhaps I did something wrong?

Boba

Dec 17th, 09

Let me try…

Boba

Dec 17th, 09

http://tutsvalley.com/files/paginateNEW.rar

There you go. Just call the function paginateIt(); when you want it to refresh the pagination.

Clark

Dec 17th, 09

Thanks so much, much appreciated. One last thing that is going to sound totally newb, but how would I call the function paginateIt(); – just started learning jquery.

Boba

Dec 17th, 09

That’s why i’m here :)

Check line 48 in the index.html file. Simply type paginateIt(); and it will refresh it.

Clark

Dec 17th, 09

This still does not seem to work. Should it be refreshing the number of pages on its own? Also when I filter the articles, it only filters the paginated page that I’m on and not all the articles as a whole. Any ideas?

Thanks for all of the help.

Boba

Dec 17th, 09

Yes it refreshes the number of pages on it’s own.

But i think i misunderstood you, how exactly do you filter the data?

Clark

Dec 17th, 09

To filter, i am using this:
http://dev.darrenhall.info/temp/stackoverflow/jqueryfilter/
(view page source to see jquery and structure).

This is what the articles are from my php script:
echo “”;
echo “”;
echo “$siteName”;
echo ” “;
echo ” “;

As you can see its in two divs. I don’t know if that will cause a problem with the children stuff.

Boba

Dec 17th, 09

I understand, don’t worry about the divs.

The problem is that the data is just hidden but it’s still there, and because of that it’s still counting it.

I modified the http://tutsvalley.com/files/paginateNEW.rar

And made it so it works with that filtering you have.

Clark

Dec 17th, 09

I’m sorry, didn’t seem to work. I got the same results as previously.

Boba

Dec 17th, 09

Did you put paginate it inside the filter coding?

$(“input.type_check”).click(function() {
the coding for the filter
paginateIt();
});
and
$(“input.start_check”).click(function() {
the coding for the filter
paginateIt();
});

Clark

Dec 17th, 09

I’m getting a ‘paginateIt is not defined’ when using firebug?

Boba

Dec 17th, 09

And did you put paginateIt() function before the filtering?

Clark

Dec 17th, 09

yes, my filtering js is under the paginate js

Boba

Dec 17th, 09

Can you just send over the files to skustrimovic[at]gmail.com and i’ll fix it.

Clark

Dec 17th, 09

Ok, I sent you the file.

Clark

Dec 19th, 09

hey, did you get the file?

hap

Jan 22nd, 10

any way to show all the content without pagination when printing?

Boba

Jan 22nd, 10

@hap – Not sure, sorry :(

If someone knows please help Hap out here in the comments. Thanks in advance.

Tony Harris

Jan 31st, 10

I am trying to use Jquery to create a tab set that “slides” back and forth with the use of “previous” and “next” buttons; that is, I don’t have room in my content area for:

But I do have space for this:

So when the user clicks “>”, the menu would change to

and so on.

Is it possible to combine this effect with JQuery Tabs to get the effect I need?

Thank you.

Tony Harris,
webmaster, Lions Quarter.com

Boba

Jan 31st, 10

@Tony – I believe this is what you need.

Torti

Feb 4th, 10

Hi, everyone

i’m noobie in js

can this js automatic rotate/silder ?

kanjac

Feb 9th, 10

Great job! How to implement a xml file as a text source?

Pityu

Feb 10th, 10

Nice work! It’s simple and effectiv.
Thanks!!

sjvl

Feb 16th, 10

Thanks for the tutorial!

Is there a way to make a back-link work?

Let’s say when I click from ‘Page 3′ on an item to view a detail page, I have a back-link and I want it to return to ‘Page 3′ and not to the first result page (as happens now).

p shiva sankara rao

Feb 18th, 10

Hi,

very good example it is useful and easy to understand

Thanking you,
shiva

Frank

Feb 21st, 10

Thanks for this writeup. I am not using the plugin directly, but it has inspired me to write my own version of it for our new website.

[-Stash-]

Feb 22nd, 10

This looks great, but I was wondering if there was a way to cause the pages to be created semi-manually? I’d like to be able to specifiy where the pages break and have the pagination created from a specific tag in the code – an example of this would be the <!–nextpage–> comment that WordPress uses. Is there an easy way to enable this functionality in your plugin?

donchev_a

Mar 3rd, 10

I dont know what is happaning but the code is not displayed properly.. anyway I am sure you got the idea. If you’d like I can send the whole script by e-mail. LOL :)))

Boba

Mar 3rd, 10

Use &lt and &gt (with “;” at the end)

alex

Mar 11th, 10

ps: i notice ..here the rows doesn’t work at all within your index.html example.
Can this be “hacked”??