How to create easy pagination with jQuery
jQuery pagination. All we know, that when we facing with necessarity to display large amount of data – we starting thinking about adding pagination. So we split all our content to several pages. And in this case – each page contain some part of our information. As usual this is server-side pagination, where we extracting necessary amount data from database for each page. But commonly, in case of small (or middle) data sets – we don`t need such pagination. And we can just use user-side pagination using javascript to manage with our pages. Today I will show you how to create such pagination.
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the source files and lets start coding !
Step 1. XHTML
Here are our main HTML file:
index.html (updated due few corrections)
<link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/imtech_pager.js"></script> <div class="example"> <h3><a href="#">Paragraph pagination sample</a></h3> <div id="content"> <div class="z">Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.</div> <div class="z">Everything happened because I got ill.</div> <div class="z">It was already two in the afternoon, and I was lying in bed flicking through "Peter Pan" - I must have read it a hundred times over. I had long since pulled off the bandage my mother had tied around my neck in the morning, and thrown it into a corner. I simply can't understand - how can cotton wool soaked in vodka possibly help a cough? I don't argue with my mum, of course, but after she leaves I look after myself in my own way - namely, lie in bed with a book and wait for my germs to get tired of such a boring method of passing time. It usually helps - perhaps not at once, but after a day or three. A good thing, really, that the street outside looked quite miserable - the sun poking out for brief moments, only to make room for a patchy, nasty drizzle. Though, the sun never actually peeked into the room - our house is so unfortunately placed that it is in the shadows of the new nine-floor high-rises on every side. "The only use for such a flat is to grow mushrooms", - dad used to say, back when he still lived with us.</div> <div class="z">I put my book down on the floor next to the bed, and lay on my back. Perhaps, had I shut my eyes now, nothing would have happened. But there I was, lying staring at the ceiling and listening to the ticking of the clock in the hallway.</div> <div class="z">And a speck of sunlight jumped into the room through the glass. Small - the size of my hand - but surprisingly bright. As though the window was open, with bright summer sun outside. Someone was probably playing with a mirror on the balcony of the house across the street.</div> <div class="z">The rabbit floated across the ceiling, climbed down a wall, made a vase on the dressing-table glint, and stopped, shaking slightly, on my headrest.</div> <div class="z">- Don't go, - I said for some reason, knowing that in a moment the mirror would shift and the rabbit would leave my room forever. - Stay...</div> <div class="z">And that's when it all started.</div> <div class="z">The sun rabbit tore free of the bed and floated in the air. I didn't even realise at first that such things don't happen. It was only when the flat spot hanging in the air started puffing out to form a fuzzy orange ball that I understood - a miracle had happened.</div> <div class="z">Four paws stretched from orange glowing fur, followed by a tail and a head. Green cat eyes blinked and gazed at me steadily. And overall, in fact, the rabbit looked more like a kitten than anything else. Except he was hanging in the air, glowing, and seemed light as the fairy fluff that floats away if one blows gently.</div> <div class="z">- Hello, - purred the kitten. - Thank you for the invitation.</div> <div class="z">I closed my eyes for a second, but when I opened them again, the kitten hadn't disappeared. In fact, he'd flown closer.</div> <div class="z">- I don't believe in fairy tales, - I told myself. - I'm grown up now.</div> <div class="z">- Well, compared to the girl who was holding the True Mirror, you are quite grown up, - declared the kitten, unperturbed, and lowered himself onto the blanket. I glanced over - to see if there would be smoke - but everything seemed all right. I could feel warmth with my chest, but not strong. And the kitten tilted his head and added: - But one can't really call you adult, either. How old are you? Ten, maybe?</div> <div class="z">- Fourteen, - I replied, finding myself calming down at such a mundane question. - Who're you?</div> <div class="z">- A sun rabbit, - replied the kitten, examining himself curiously. - What an appearance.. do I look like one?</div> <div class="z">- <b>Like</b> what?</div> <div class="z">- Like a <p style="font-weight:bold;color:red;">sun</p> rabbit.</div> <div class="z">- More like a kitten.</div> <div class="z">- Hardly better, - stated the Kitten sadly and stretched out. And I didn't think of anything better than repeating:</div> <div class="z">- Who're you?</div> <div class="z">- But we have already arrived at a consensus! - said the Kitten with sudden hurt. - A sun rabbit, or more precisely - a kitten, because I look far more like one! What is there not to understand?</div> <div class="z">I found myself tongue-tied. Well, naturally, a small green animal that eats stones would simply be - a small green stone-eater. Simple. And a sun rabbit is a sun kitten, because he looks nothing like a rabbit.</div> <div class="z">- So you mean - any rabbit can come to life if one just calls it? - I asked cautiously. For some reason it seemed to me the Kitten would be hurt at the question again. But he just shook his head proudly:</div> <div class="z">- As if! Any! Only True Light, reflected in a True Mirror, can come to life.</div> </div> <div id="pagingControls"></div> </div> <script type="text/javascript"> var pager = new Imtech.Pager(); $(document).ready(function() { pager.paragraphsPerPage = 5; // set amount elements per page pager.pagingContainer = $('#content'); // set of main container pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers pager.showPage(1); }); </script>
As you see – we put all content inside <div id="content"> element into P paragraphs. And than, using jQuery – doing small initialization of our pagination into prepared <div id="pagingControls"></div> element. Inside our initialization js script – you can see that I set our container element, name of paragraph tag, and amount paragraphs per page (5). All easy.
Update! I changed tag for paragraphs <p> to <div class="z"> for better selections. Now it able to handle with inline styles and tags
Step 2. CSS
Here are used CSS file. Just few styles for our demo:
css/styles.css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px} #content p{text-indent:20px;text-align:justify;} #pagingControls ul{display:inline;padding-left:0.5em} #pagingControls li{display:inline;padding:0 0.5em}
Step 3. JS
Here are two JS files:
js/jquery.min.js
Both – just jQuery library. Available in package.
js/imtech_pager.js (updated due few corrections)
var Imtech = {}; Imtech.Pager = function() { this.paragraphsPerPage = 3; this.currentPage = 1; this.pagingControlsContainer = '#pagingControls'; this.pagingContainerPath = '#content'; this.numPages = function() { var numPages = 0; if (this.paragraphs != null && this.paragraphsPerPage != null) { numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage); } return numPages; }; this.showPage = function(page) { this.currentPage = page; var html = ''; this.paragraphs.slice((page-1) * this.paragraphsPerPage, ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() { html += '<div>' + $(this).html() + '</div>'; }); $(this.pagingContainerPath).html(html); renderControls(this.pagingControlsContainer, this.currentPage, this.numPages()); } var renderControls = function(container, currentPage, numPages) { var pagingControls = 'Page: <ul>'; for (var i = 1; i <= numPages; i++) { if (i != currentPage) { pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>'; } else { pagingControls += '<li>' + i + '</li>'; } } pagingControls += '</ul>'; $(container).html(pagingControls); } }
Live Demo
Conclusion
I hope that today’s sample was pretty easy. And it will useful for your projects. Do not forget to say thank you :) Good luck!
Hi,
Have you find any solution for the blank page issue in IE. I am using jQ version 1.7.2 & find the problem. Please help me. Thanks in advance.
Hi Atanu,
Yes, I’ve found the solution (which is pretty easy).
First of all, add the following new element
<div id="content2"></div>
before <div id="content"
after, make the #content invisible: <div id="content" style="display:none">
and finally, in the imtech_pager.js make the next change:
this.pagingContainerPath = ‘#content2’;
That’s it, and it will work with any jQuery version.
First of all, thanks for your useful code.
I faced the same problem as Atanu and tried your solution.
However, when switching the page, the same content is displayed again.
Do you have an idea how to fix this?
Nevermind, I fixed it. It was a stupid error with having defined variables within the wrong scope.
Hello Maria,
We are very glad that you were able to overcome your problem and force the script to work correctly
Hi Maria,
Can you share the fix you did?
Hello, Andrew
Thanks for the tutorial.
Is the plug in yours?
What is the license? MIT?
I would like to get the license, so i can know how to implement it in my proyect, of course giving credit to it’s owner.
Thanks
Hi Greg,
Initially, it was taken from some very old archives, but then we re-wrote it completely. Thus, you can contact us directly about the license of our codes.
How would I go about triggering the next page if i wanted to implement a javascript that triggers the next page on scroll.
Thanks alot im happy i came across this jquery.
Hi Mike,
Prev/Next buttons were not implemented in this version of pagination. In general, this is possible if you create a new internal variable, and then you can use ‘showPage’ function to switch pages, as it was implemented here: https://www.script-tutorials.com/creating-modern-jquery-pagination-for-content/
can this plugin be implemented with infinite-scroll?
Yes, of course. The main idea of this plugin is to split all content into pages, and show only the first page (other pages are invisible). Infinite scroll (in general) has another idea – to show the first page, after, when we scroll down, it begins showing the second page, then third and so on.
It’s not working with latest jquery/1.11.0/jquery.min.js…
I object, it works perfectly with jquery-1.11.1.min.js