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
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!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Nikola Malich
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
cool, Ill go check this out now.
very cool post !!!
i will check this too….
Nice article, will try soon :)
Does this degrade gracefully?
… 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.
Ah cool, may finally be worth me getting Tuts+
just what i needed :)
thanx, gona try to learn this asap
I wrote something like this.. Collapse and expanding footer using jquery http://www.myhtmlworld.com/web-development/collapsing-expanding-footer.html
Something like what ? I did not see any pagination in your thing……
You can paginate anything with the use of slider-coda…
* coda-slider :D
… 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.
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/
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.
… 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…
Yet again, I am tempted to sign-up
… 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!
Hey Nikola,
are you using a jQuery plugin like this:
http://plugins.jquery.com/project/pagination
or are you coding it by hand?
thanks
… everything is hand coded from scratch.
great!
Been looking for something like this! Thanks!
Video isn’t working though :-S
… did you download it?
No, just tried to view it in the pop-up player.
Sorry it is working now.
I think its a combination of slow internet and a rubbish work computer!!
This is an awesome tutorial!
… thanks Chad.
Awesome! So happy I have a plus membership! :)
ты супер, детка :)
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
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
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…
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!
Just curious what you came up with. I arrived at an elementary conclusion, but I’m not happy with it.
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.
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.
i can’t see tutorial :(
i’am so very poor
sorry for my english
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&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)
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…