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:
[sociallocker]
[/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)
01 |
< link rel = "stylesheet" href = "css/main.css" type = "text/css" /> |
02 |
< script src = "js/jquery.min.js" ></ script > |
03 |
< script src = "js/imtech_pager.js" ></ script > |
05 |
< h3 >< a href = "#" >Paragraph pagination sample</ a ></ h3 > |
07 |
< div class = "z" >Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.</ div > |
08 |
< div class = "z" >Everything happened because I got ill.</ div > |
09 |
< 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 > |
10 |
< 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 > |
11 |
< 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 > |
12 |
< 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 > |
13 |
< 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 > |
14 |
< div class = "z" >And that's when it all started.</ div > |
15 |
< 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 > |
16 |
< 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 > |
17 |
< div class = "z" >- Hello, - purred the kitten. - Thank you for the invitation.</ div > |
18 |
< 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 > |
19 |
< div class = "z" >- I don't believe in fairy tales, - I told myself. - I'm grown up now.</ div > |
20 |
< 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 > |
21 |
< div class = "z" >- Fourteen, - I replied, finding myself calming down at such a mundane question. - Who're you?</ div > |
22 |
< div class = "z" >- A sun rabbit, - replied the kitten, examining himself curiously. - What an appearance.. do I look like one?</ div > |
23 |
< div class = "z" >- < b >Like</ b > what?</ div > |
24 |
< div class = "z" >- Like a < p style = "font-weight:bold;color:red;" >sun</ p > rabbit.</ div > |
25 |
< div class = "z" >- More like a kitten.</ div > |
26 |
< div class = "z" >- Hardly better, - stated the Kitten sadly and stretched out. And I didn't think of anything better than repeating:</ div > |
27 |
< div class = "z" >- Who're you?</ div > |
28 |
< 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 > |
29 |
< 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 > |
30 |
< 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 > |
31 |
< div class = "z" >- As if! Any! Only True Light, reflected in a True Mirror, can come to life.</ div > |
33 |
< div id = "pagingControls" ></ div > |
35 |
< script type = "text/javascript" > |
36 |
var pager = new Imtech.Pager(); |
37 |
$(document).ready(function() { |
38 |
pager.paragraphsPerPage = 5; // set amount elements per page |
39 |
pager.pagingContainer = $('#content'); // set of main container |
40 |
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers |
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
1 |
body{ background : #eee ; font-family : Verdana , Helvetica , Arial , sans-serif ; margin : 0 ; padding : 0 } |
2 |
.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 } |
3 |
#content p{ text-indent : 20px ; text-align : justify ;} |
4 |
#pagingControls ul{ display : inline ; padding-left : 0.5em } |
5 |
#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)
02 |
Imtech.Pager = function () { |
03 |
this .paragraphsPerPage = 3; |
05 |
this .pagingControlsContainer = '#pagingControls' ; |
06 |
this .pagingContainerPath = '#content' ; |
07 |
this .numPages = function () { |
09 |
if ( this .paragraphs != null && this .paragraphsPerPage != null ) { |
10 |
numPages = Math.ceil( this .paragraphs.length / this .paragraphsPerPage); |
14 |
this .showPage = function (page) { |
15 |
this .currentPage = page; |
17 |
this .paragraphs.slice((page-1) * this .paragraphsPerPage, |
18 |
((page-1)* this .paragraphsPerPage) + this .paragraphsPerPage).each( function () { |
19 |
html += '<div>' + $( this ).html() + '</div>' ; |
21 |
$( this .pagingContainerPath).html(html); |
22 |
renderControls( this .pagingControlsContainer, this .currentPage, this .numPages()); |
24 |
var renderControls = function (container, currentPage, numPages) { |
25 |
var pagingControls = 'Page: <ul>' ; |
26 |
for ( var i = 1; i <= numPages; i++) { |
27 |
if (i != currentPage) { |
28 |
pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>' ; |
30 |
pagingControls += '<li>' + i + '</li>' ; |
33 |
pagingControls += '</ul>' ; |
34 |
$(container).html(pagingControls); |
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!