enavu webdevmania tutsvalley psdestination
visit the enavu network
112 Comments Article Title Overlay Article Title

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

This post has been re-written into an amazingly useful plugin for jQuery, click here to read more!

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.

Related posts:

  1. jPaginate – jQuery Pagination System Plugin
  2. Equal Column Height with jQuery
  3. Making a nice jQuery content scroller with ease.
  4. Curtains Opening Animation with jQuery
  5. Making image captions using jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

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

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

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

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

  • “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?

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

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

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

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

  • Excellent! I look forward to it. Thanks.

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

    Should be completely done tomorrow

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

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

  • @natz – i’m happy this helped you

  • 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

  • Maybe this will help you… :)

    I will make a tutorial on that soon anyway.

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

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

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

    });

  • Glad to help.

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

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

  • Thanks :)

  • Great one man!
    thanks

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

  • @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 :)

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

  • Nice one..I am really fond of jQuery…

  • 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();

  • @ProMo

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

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

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

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

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

  • 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

  • @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 :)

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

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

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

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

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

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

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

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

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

  • 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 :)

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

  • Let me try…

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

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

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

  • That’s why i’m here :)

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

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

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

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

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

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

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

  • 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();
    });

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

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

  • yes, my filtering js is under the paginate js

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

  • Ok, I sent you the file.

  • hey, did you get the file?

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

  • @hap – Not sure, sorry :(

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

  • 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:

    Home | About | Reviews | Store | Contents | Contact

    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

  • @Tony – I believe this is what you need.

  • Hi, everyone

    i’m noobie in js

    can this js automatic rotate/silder ?

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

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

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

  • Hi,

    very good example it is useful and easy to understand

    Thanking you,
    shiva

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

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

  • 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 :) ))

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

  • Nice article.
    How do i implement pagination with the html table ? I tried puttingthe table inside the it is just showing all the rows .

  • in ver2 demo, the last page is empty. Is there a problem with the math? I wouldn’t expect to see a page number if page is empty. Also, what about a view all function that hides pagination div or replaces it with a “view item_count” per page link?

  • Hi,
    I have implemented this pagination in my code.
    I have faced one probem

    I am displaying my content in a table. there are 3 colums in my table. I have defined tabled heading within tag.
    and data in
    pagination works fine but the major proble is that the all the table data expands in first column of a table heady.

    It should be expand in 3 colums as there are three heading colums.
    This problem occurs in mozilla.
    It work fine in IE.
    plz need ur valuable suggestion.
    Hope to see positive response.

  • Hi , is it possible to display the next-prev-controls 2 times.

    I used the Div twice and it works. But its not strict.
    It has 2 be a class.

    So i made it class( in HTML and script ) But it doesnt work.

    Any suggestions ? Thx in advance.

    ( it worked like a charm btw )

  • I need A Video Tutorial For this Pls…im having problems cus im a new jquery man..

  • jquery with my other jquery library Web page conflicts, how to solve, so that they can co-exist?

  • Go in your plugin and replace all $ with jQuery

  • Hi,
    Can you update the code so the pagination works as so 1 2 3 4 5 6 7 8 …… 60

  • Are you still working on this? I have implemented your solution in my code but the first time you load everything it displays all of the items so it doesn’t paginate right off the bat. If you could help me figure this out that would be great. Thanks!

  • Beautiful script, very clean usage and minimum intervention in the HTML code; I love it.
    It helped me a lot, because in the page that I made in Django I had to display a table with a list of elements that were filtered by some complex criteria, aside from the raw SQL select. So the the usual SELECT … LIMIT … statement wouldn’t work for me. I had to do the pagination on the client side, and your script worked like a charm. Thanx!

  • if you check my website, http://www.theblacknumbers.com, you will see a version of your plugin i used. so far it’s much better than the one i had before. my only gripe is that when i tried to insert a second pagination, at the bottom, the next/previous buttons stopped working. any solutions for this you know of?

  • Hi. Great Tutorial. Just wondering if your pagination2 is ready for download. Just in case my page gets huge. http://web.enavu.com/demos/paginate2/
    Am waiting for it!

  • hi the pagination2 sample is greate but, it seems not be working fine in XHTML pages. is it possible for you to elaborate on that too?

  • Using v2 in a basic php blog/news type script I wrote but but because ive added it to the bottom of page when you click “link” I need it to scroll/goto top …any ideas how to impliment this?

    I tried this:

    $(‘.page_link’).click(function(){
    $(‘html, body’).animate({scrollTop:0}, ’slow’);
    });

    It sort of worked for 1st link to 2nd but not for others …

    Thank in advance :)

  • Hey !
    Thanks for you the tutorial ! Awesome !

    But how can I modify the script, to get the “prev” and “next” button only ?
    I tried to delete the numbers button, but it didnt work out :-(

    thanks

  • Great script, but I’m having some problems with the slice. I have some other coding in each line for links. These are also counted as an element of the .children() function in the .slice() function. So depending on the number of links, less items are shown on the page.

    How can I overcome this issue?

  • Boba,

    Do you have documentation to go along with your code? I am looking for requirement specifications and limitations.

    Best,
    Richard

  • I edited your code to make it able to handle multiple sets at a time… Hope its ok :-)

    http://code.google.com/p/dynamic-pagination/

  • @Boba

    thanks for great work and nice tutorial !

    Bart

  • @ Randi

    Example: User click pagelink 2 from set 3. Page 2 in set 3 will be shown, OK.
    But all pagelinks 2 in the other datasets gets the class ‘active_page’.
    How do I add class ‘active_page’ only for the link in one/current dataset ?
    Any Idea?

    Bart

  • Thanks a lot for this amazing script. Works perfectly..

  • Hey, great script, I was wondering wether i could get permission to use it on my website? or how’s that?

  • You can absolutely use it for anything you wish!

  • How do I download your .rar file? I am interested in the paginateNEW.rar.
    Thanks

  • It’d also be great to see some conditions added that test if pagination links need to be added. Having ‘Prev’ ‘1′ ‘Next’ looks a little silly.

    Other than that it’s perfect for what I need.

  • what if in the content div you have a table ?

  • Hi admin,

    Thanks a lot! It is easy and simple to use tutorial! What a tutorial!!! Thanks a lot!!

    I’m new to jquery and ajax. I managed to get it working in firefox but it doesn’t seem to be working on safari 4.0.4. What i’ve done was fetching the external html ( which is the whole pagination html file ) using ajax jquery. It works perfectly on Firefox but not on Safari 4.0.4 browser. I’ve sent you an email and It would be awesome if you can have a look at my problem regarding to this. Thank you.

    Here are the sample code :

    $(document).ready(function() {
    $(‘#demo_content’).load(‘content.html’);

    });

    $(function(){
    $(‘p.load_it a’).click(function(){
    $(‘#demo_content’).load(‘content.html’);
    return false;
    });
    });

  • Hi,

    I’m new to jquery and am learning it. I was following these 2 tutorials and I couldn’t find the solutions for what I am looking for:

    1). http://spyrestudios.com/demos/jquerydemo2/ajax.html

    2). http://web.enavu.com/demos/paginate2/

    What I’ve done :
    1). The sub-dynamic content which is data from the whole pagination html ( level 3 )
    1). The dynamic content which is a whole pagination html ( level 2 )
    2). The main content for handling the dynamic content ( level 1 )

    2 problems :

    1). When (level 1) is clicked, it shows (level 2) works perfectly on firefox and IE but not on safari.
    2). When (level 2) is clicked, Level 3 doesn’t work at all.

    I’ve posted a demo page to help you guys understand better :

    http://www.thedeanery.com.au/ajax02.html

    Can you pin point me what seems to be the problem ? Thank you very much.

  • To get the paging to display 1 instead of 2 as the first page when traversing up the later pages, take the statement

    “if(i == 1 || i == number_of_pages-1 || (i >= start_range && i <= end_range))"

    and change i to 0, like: "if(i==0 || ….."

    Thanks for a great tutorial!

  • Hi Boba,

    Wonderful plugin, is there any way to apply a fadeIn/fadeOut to the content when the numbers are clicked.

    Thanks in advance.

  • Hi,

    Looks good but would this work for getting information back from queries(server-side) without having to change any of the code ?

    Thanks

  • Hey all just wanted to let you know we have officially released a plugin for jQuery that does what the code in this page does and more! So if you want an amazing jQuery pagination system feel free to check this page out http://web.enavu.com/js/jquery/jpaginate-jquery-pagination-system-plugin/

  • Hi Boba,

    I just came across your site and this tutorial is good stuff. Keep up the good work man.

    Thanks again

  • thanks for the script i was looking simple script like this and i end up my search in this website through your simple code

  • thank u so much for the code
    i m very thankful to u

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting