Paginate Anything with jQuery: New Plus Tutorial

Paginate Anything with jQuery: New Premium Tutorial

on Sep 23rd 2009 with 39 comments

In this Nettuts+ Premium tutorial, you’ll learn how to use jQuery to paginate virtually anything: blogs, image galleries, tables and more! We will review the basic set up, steps and calculations required to paginate content and create dynamic links, etc. By the end of this tutorial you should feel comfortable incorporating this style of pagination into any of you projects. Sign up!

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!


Sample

Sample


Tags: jQuery
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I am an independent Web Developer who enjoys working with PHP, JavaScript, HTML, CSS and PhotoShop. I'm an enthusiast of the CodeIgniter PHP Framework as well as the jQuery JavaScript library and am hoping to learn Ruby in the near future.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • kevinsturf

    cool, Ill go check this out now.

  • http://designmoon.com Mikheil

    very cool post !!!
    i will check this too….

  • http://www.twitter.com/alxgdesign Alxg

    Nice article, will try soon :)

  • Mark Sinkinson

    Does this degrade gracefully?

    • Nikola Malich
      Author

      … well, I wrote the tutorial to walk users through this pagination ‘technique’. As such, I focused on learning key concepts in the hopes that the average reader will be able to learn and integrate this logic into their own work. Think of this and use this as a learning tool and then make the technique shine with your own implementations… that’s the fun part.

      • Mark Sinkinson

        Ah cool, may finally be worth me getting Tuts+

  • gway

    just what i needed :)
    thanx, gona try to learn this asap

  • http://www.myhtmlworld.com sunil

    I wrote something like this.. Collapse and expanding footer using jquery http://www.myhtmlworld.com/web-development/collapsing-expanding-footer.html

    • Abhijit

      Something like what ? I did not see any pagination in your thing……

  • fesh

    You can paginate anything with the use of slider-coda…

  • fesh

    * coda-slider :D

    • Nikola Malich
      Author

      … actually, that’s not entirely true. Coda-Slider, which is a neat Plugin by the way, is more of a Tabs system similar to jQuery’s UI Tabs in many respects. Although it does use dynamically created links to navigate ‘Panels’ of content, it has a very different structure, function and implementation.

      Pagination, simply stated, takes a large ‘block’ of content and subdivides it into smaller manageable portions without really altering the HTML structure beyond the creation of links and sub-division into smaller portions. Think of the NetTuts+ article index, for example. The index, which is rather large, is subdivided into smaller pages / portions which are more manageable and easier to scan. As such, this technique teaches the user how to paginate virtually any type of content with jQuery: blog indexes, tables, image galleries, link lists, block level content etc.. One could drop this code into just about any application, without really altering a thing, to paginate content on the fly. Additionally, using this logic, users can create any number of really useful / neat plugins including ‘Slider’ type systems like the Coda-Slider! :)

      Lastly, I’m not really sure that Coda-Slider is designed or able to paginate a TABLE or that it could be modified to paginate paragraphs as it’s function serves a different purpose.

  • http://www.voveris.eu/ Faifas

    I have wrote a tutorial about CakePHP and jQuery pagination. If you’re interested you may find it here: http://voveris.eu/2009/09/19/cakephp-ajax-pagination-with-jquery/

  • ayahuasca

    I am (not yet) a plus member, but I have a question about this tut just before i get a plus membership for this tut.

    When thinking about how pagination could be accomplished with jquery, the only thing i can imagine is loading the whole ammount of post into the page and let javascript do the pagination, while when you use php or asp you can actually just load the items you want to show on the specific page.

    So you would load a lot less from your database, which makes your website faster.

    • Nikola Malich
      Author

      … this pagination system is blazingly fast and has a number of great applications: photo galleries, blog rolls, link lists, paragraphs or any block level element really. If you’re trying to paginate something huge and you feel that it’s to much data to load at once then you certainly wouldn’t use JavaScript. JavaScript can’t replace PHP and PHP can’t replace JavaScript…

  • http://inspiredbywordpress.co.uk Daniel Groves

    Yet again, I am tempted to sign-up

    • Nikola Malich
      Author

      … go for it! I’ve learned so much since signing up. Keep in mind that you’ll also have full access to PsdTuts+, AudioTuts+ and all the others!

  • http://curtisaallen.com callen

    Hey Nikola,

    are you using a jQuery plugin like this:
    http://plugins.jquery.com/project/pagination

    or are you coding it by hand?

    thanks

    • Nikola Malich
      Author

      … everything is hand coded from scratch.

  • http://www.graphic.totalh.com UNIXIX

    great!

  • Sean

    Been looking for something like this! Thanks!

    Video isn’t working though :-S

    • Nikola Malich
      Author

      … did you download it?

      • Sean

        No, just tried to view it in the pop-up player.

      • Sean

        Sorry it is working now.

        I think its a combination of slow internet and a rubbish work computer!!

  • Chad

    This is an awesome tutorial!

    • Nikola Malich
      Author

      … thanks Chad.

  • http://caitlinreynolds.com Caitlin Reynolds

    Awesome! So happy I have a plus membership! :)

    • Рома

      ты супер, детка :)

  • t. johnston

    i must say that finding the plus tutorials is a real pain in the ass. there seems to be more emphasis on signing new members up rather than directing existing members to the exact link

  • Stephen Price

    Hey is there away to click on a link inside the paginated pages to take you to another paginated page. For example I have 4 pages I would like to click on a text link in page one that takes me to page 3.

    Thanks

    • Nikola Malich
      Author

      You can do these relatively easily. First, you’ll need to adjust the cached selector for the anchors.

      page.anchors = page.parent.find(‘A.pagination-link’);

      Next, since you now have an achor which isn’t a sibling to any of the other anchors, you’d need to adjust the ‘sibling’ selector we use in the click event.

      this.siblings = page.parent.find(‘A.pagination-link.ui-state-active:first’);

      Then, simply place the anchor where you need and give it the appropriate attributes.

      3

      If you’re using a text only link or would like to style this link differently, you’ll have to use a unique CSS selector to access it’s properties or give it a unique class of it’s own. I’d avoid adding another class, though, as it already has three…

      • David

        But Nikola, what if we’re complete hacks and nonsensical so even though we are able to pull it off using our limited knowledge, there’s probably a better way… and that is where we turn to you, o glorious teacher!

    • David

      Just curious what you came up with. I arrived at an elementary conclusion, but I’m not happy with it.

  • Vega

    What about showing/hiding next/previous links when needed? For example if i’m on page 1 I obviously will not need a previous link and if i’m on the last page I surely will not need a next link. At any rate a good tut.

    • Nikola Malich
      Author

      Right, I actually didn’t want to go that far… I thought that if readers understood the general logic and approach those kinds of things would be simple for them to implement. In a ‘production’ version of this plug-in, I hide the previous and next links accordingly and also keep the link for the ‘current’ page centered and active. I also added a ‘jump to’ feature which allows you to jump to any page of content and adjusts the links accordingly. Thanks for the compliment, to.

  • Panchito

    i can’t see tutorial :(
    i’am so very poor

    sorry for my english

  • http://www.ortwin.nl Ortwin

    Hi,

    First of all thanks for this complete tutorial. great explanation on the subject.
    I’ve used this plugin for static data but I also have an table filled with dynamisch data through JSON.

    Is there a (simple) way to make this pagination plugin work for dynamicly loaded data?

    The code I use for loading the data in the tbody is:

    $.fn.loadMessages = function (options) {
    var options = jQuery.extend({
		box: 'outbox'
    }, options);
	
    $('#' + options.box +  ' tbody').html("");
    $.ajax({
        url: '/inc/php/jquery.functions.php?action=getMessages&amp;box=' + options.box,
        type: 'get',
        async: 'false',
        dataType: 'json',
        success: function (data) {
            $.each(data.results, function (i, result) {
                var result = '' + 
				'<a href="/user/' + result.m_from + '/' + result.user_name + '.html" rel="nofollow">' + result.user_name + '</a>' + 
				'' + result.m_subject + '' + 
				'' + result.m_date +  '' + 
				'test' + 
				'';
                $(result).appendTo('#' + options.box + ' tbody');
            });
        }
    });
}

    Thanks in advance for your comment(s)

  • Nikola Malich
    Author

    Have you considered calling the pagination within the complete callback which executes after the success and error callbacks?

    
$.fn.loadMessages = function (options) {
	var options = jQuery.extend({
		box: 'outbox'
	}, options);

	$('#' + options.box + ' tbody').html("");

	$.ajax({
		url: '/inc/php/jquery.functions.php?action=getMessages&box=' + options.box,
		type: 'get',
		async: 'false',
		dataType: 'json',
		success: function (data) {
			$.each(data.results, function (i, result) {
				var result = '' +
				'' + result.user_name + '' +
				'' + result.m_subject + '' +
				'' + result.m_date + '' +
				'test' +
				'';
				$(result).appendTo('#' + options.box + ' tbody');
			});
		},
		complete: function(){
			// init pagination here
		}
	});
}

    I haven’t tested this yet but I’m sure it will work. The only problem may be that you end up with multiple sets of pagination links. If this is the case then you can simply remove the links and link container from the DOM before you re-init pagination or you could add a check to the pagination plug-in to determine if the links and link-container exist and if they do, simply remove them…

  • Greg

    this plugin creates a mountain of links when i applied it to my blog (years worth of posts)… is there a way to only show a certain amount of links?

    http://shareimage.org/images/d2k7y5fr5jr6tbm682x.png

    crazy looking – eh? :)