jQuery pagination tutorial. After a short break, I decided to create a new own JQuery plugin for pagination (for different content), which will be based not on the number of elements (childrens) per page, but will take care of the height of the content. And it will try to keep the same height for the pages. This means that the number of elements on the page can be different. Everything will depend on the height of these children. Plus, I will using fade effect to switch between pages.



In beginning – download our package and check demo:

[sociallocker]

[/sociallocker]

Lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/main.js"></script> <div class="example"> <h2>Arkady and Boris Strugatsky. Poor cruel folk</h2> <div id="content" class="content"> <div>The King sat naked. Like a foolish pauper on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</div> <div>He awoke at midnight from a nightmare and immediatelly understood that he was finished. Some one weezed and writhed by the door of the bedroom suite, he heard footsteps, metalic jingling and drunken mummbling of His Highness, Uncle Buht: "Let me through... Let me.. Break it down, hell with it..." Wet with icy sweat, he slintly rolled off his bed, ducked into a secter closet, and loosing himself he ran down the underground passage. Something sqelched under his bare feet, the startled rats dashed away, but he did not notice anything, just now, sitting next to a wall he remembered everything; the darkness, the slippery walls, and the pain from a blow on the head against the shakled door to the temple, and his own unberable high yelp.</div> <div>They shall not enter here, he thought. No one shall enter here. Only if the King order's so. But the King shall not order... He snickered hysterically. Oh no, the King will not order! He carefully un screwed up his eyes and saw his blue, hairless legs with scraped knees. Still alive, he thought. I will live, because they shall not enter here.</div> <div>Everything in the temple was blueish from the cold light of the lanterns -- long glowing tubes that were stretched under the ceiling. In the center, God stood on an eminence, big, heavy, with sparkling dead eyes. The King continuously and stupidly stared, until God was suddenly screened by a shabby lay brother, still a greenhorn. Scraching, with an open mouth he gazed at the naked King. The King squinted once again. Scum, he thought, a lousy vermine, catch the mongrel and to the dogs, for them to ravage... He reasoned that he did not remember the lout well, but he was long gone. So scrawny, snotty... That's all right, we'll remember. We'll remeber everything, Your Highness, Uncle Buht. During the father's reighn, I dare say you sat quietly, drank a bit and kept silent, were afraid to be noticed, you knew that King Prostyaga did not forget you ignoble treachery...</div> <div>Great was the father, the King thought with an accustomed envy. You'd be great, if your advisors are God's angels in flesh. All know, all have seen them: their faces fearful, white, like milk, and their garment were such that one could not understand if they were naked or not. And their arrows were fiery, like lightning, they drove off the nomads with the arrows, and although they casted them overhead, half the horde cripled from fear. His Highness, Uncle Buht, wispered once upon a time, drunk and burping, that those arrows can be cast by anyone, that special slings are needed that the angels have and that would be nice to take from them. And he said then -- he was drunk then, -- that if it is nice to have, why not have it, why not... Soon after that table talk one angel fell off the wall into the moat, probably slipped. Next to him they found one of uncle's body guards with a javelin between his shoulder blades. It was a dark, dark deed... It good that the people did not care about the angels, they were scary to look at, but it is not clear why is it scary -- angels were happy, cordial people. Only their eyes were scary. Small, shiny, and they keep racing around... non humanoid eyes, not peaceful. So the people hushed down, although father, King Prostyaga gave them such freedom that it is shameful to remember... although, before the Coup, father, they say was a saddle maker. For saying so, with my own hands I had torn eyes out, and sewen ears shut. But I remember, he used to sit in the evenings by the Crystal Tower, and he would cut out leather -- beautiful work. And I would perch myself at his side, it's warm and comfy... The angels were singing from the rooms, so quietly, and in harmony, and father would start to accompany -- he knew their language -- it used to be spacious, nobody around... not like now, guards are stuck at every corner, but there is no sense in it...</div> <div>The King lamented. Yes, he was a good father, just that he did not die for a long time. You can't do that while your son is still alive... The son is also the King, the son also want's to... But Prostyaga did not age, I'm over fifty,and he still looks younger than me... It looks like the angels had asked God for his health... They asked for his health, but they forgot about me. They say that the second one they managed to pin down in the father's room, he had a sling in each hand, but he did not fight. Before death, they say, he threw both of them out the window, they burst into a blue flame, there was no dust left... Too bad about the slings... And Prostyaga, they say, cried and got drunk then, within an inch of his life -- the first time since his reign -- looked for me, they said, loved me, believed...</div> <div>The King drew his knees to his chin, and hugged his leggs. So what if he believed? One should know one's limit, abdicate, like it is done elsewhere... and I do not know anything, and do not want to. There was only a conversation with my uncle, His Highnesss.</div> <div>"Prostyaga, -- he said, -- doesn't age". -- "Yes, -- I tell him, -- but what can we do, the angels pleaded for his health." Uncle then sneered, scum, and wispered: "Angels, -- he said, -- no longer sing their songs here". And I blurted out: "It is true, but now there is a way to deal with them, not just with humans". Uncle looked at me soberly, and immediatelly left... And I didn't really say anything... Empty words, without meaning... And in a week Prostyaga died from a heart attack. So what? It was his time. He looked young, but in reality he was over one hundred. We'll all die...</div> <div>The King was startled, and covering himself, awkwardly sat up. Into the temple came the High Priest Agar. Lay brothers were leading him by the hands. He didn't look at the King, came up to God and kneeled in front of the eminence, tall, hunch-backed, with waist length dirty-white hair. The King gloated "It's the end of you, Your Highness, you did manage, I'm not like Prostyaga, you'll ravage your oun intestines, drunken swine..." Agar spoke in a rich voice:</div> <div>- God! The King wishes to speak to you! Forgive him and listen!</div> <div>The room fell silent, no-one dared to breathe. The King contemplated: when the great flood happened, and the earth burst, Prostyaga asked God to help, and God came down from the sky as a ball of flame on the same day, and that night the earth closed up, and the flood disappeared. It means that this is how it will happen today. You were late uncle, Your Highness, you didn't manage. No one can help you now...</div> <div>Agar straighned up. The lay brothers that supported him, jumped away, turned with their backs to God, and covered their heads with their arms. The Kind saw, how Agar stretced his clasped hands and put them on Gods chest. God's eyes lit up. The King snapped his jaw from fear: the eyes were big and different -- one was snakish-green, the other white, as bright as light. One could hear how God started to breathe, heavily, with crackling, like consumption. Agar backed away.</div> <div>- Speak, - he whispered. It looked like he was unsettled as well.</div> <div>The King lowered to all fours, and started to crawl to the eminence. He did not know what to do or how. And he did not know how he should start and whether he should tell the complete truth. God breathed heavily, weezing, suddenly he started to whimper, quietly and thinly - scary.</div> <div>- I'm the son of Prostyaga -- said the King in despair, smothering his face against the cold stone. -- Prostyaga died. I ask protection from the conspirators. Prostyaga made mistakes. He did not know what he was doing. I have fixed everything: calmed the people, became great and unatainable, like you, I gathered an army... And the treacherous Buht is disrupting my plans to conquer the world... He wants to kill me! Help me!</div> <div>He raised his head. God, without blinking, was looking in his face with green and white. God was silent.</div> <div>- Help me... - repeated the King. -- Help! Help! - He suddenly thought, that he is doing something wrong, and that God is indifferent towards him, and inopportunely remembered: they said, his father, Prostyaga, did not die from a heart attack, but was killed here, in the temple when the killers came in, with out asking permission. -- Help!.-- he screemed desperatelly. -- I'm afraid to die today! Help! Help!</div> <div>He hunched up on the stone tiles, biting his hands from an unbarable terror. Differently-eyed God hoarsly breathed above his head.</div> <div>- Old vermine, - said Tolya. Ernst was quiet. On the screen, through the sparks of static an ugly black shape of a human lay splattered on the floor. -- When I think, Tolya spoke again, -- that if not for him, Alan and Derek would be alive, I want to do something, that you never wanted to do.</div> <div>Ernst shrugged his shoulders and moved to the table.</div> <div>- And I always think, - Tolya continued, - why didn't Derek shoot? He could have killed all...</div> <div>- He couldn't , - said Ernst.</div> <div>- Why couldn't he?</div> <div>- Have you ever tried shooting at a human being?</div> <div>Tolya made a wry face, but didn't say anything.</div> <div>- Well that's what it was, - said Ernst. -- Try to imagine it. It is almost as disgusting.</div> <div>A sorowful howl was heard from the loudspeaker. "HELP HELP I AM AFRAID HELP..," the auto-translater was writing.</div> <div>- Poor cruel folk... - said Tolya.</div> </div> <hr /> <div class="pagination"> <ul> <li><a href="#" id="prev" class="prevnext">« Previous</a></li> <li><a href="#" id="next" class="prevnext">Next »</a></li> </ul> <br /> <div id="page_number" class="page_number">1</div> </div> </div>

This is sample of content (from one book) plus (in bottom) – some preparaion for futire navigation with pagination.

Step 2. CSS

Here are used CSS file with styles of our demo:

css/main.css

body{background:#eee;margin:0;padding:0} .example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} #content { position:relative; height:400px; } #content .page { position:absolute; top:0px; } .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #FFFF80; } .pagination a.prevnext{ font-weight: bold; } .page_number { border: 1px solid #9aafe5; color: #2e6ab1; padding:5px; text-align: center; width: 20px; }

Step 3. JS

Here are all JS files:

js/main.js

(function($){ $.fn.extend({ MyPagination: function(options) { var defaults = { height: 400, fadeSpeed: 400 }; var options = $.extend(defaults, options); //Creating a reference to the object var objContent = $(this); // other inner variables var fullPages = new Array(); var subPages = new Array(); var height = 0; var lastPage = 1; var paginatePages; // initialization function init = function() { objContent.children().each(function(i){ if (height + this.clientHeight > options.height) { fullPages.push(subPages); subPages = new Array(); height = 0; } height += this.clientHeight; subPages.push(this); }); if (height > 0) { fullPages.push(subPages); } // wrapping each full page $(fullPages).wrap("<div class='page'></div>"); // hiding all wrapped pages objContent.children().hide(); // making collection of pages for pagination paginatePages = objContent.children(); // show first page showPage(lastPage); // draw controls showPagination($(paginatePages).length); }; // update counter function updateCounter = function(i) { $('#page_number').html(i); }; // show page function showPage = function(page) { i = page - 1; if (paginatePages[i]) { // hiding old page, display new one $(paginatePages[lastPage]).fadeOut(options.fadeSpeed); lastPage = i; $(paginatePages[lastPage]).fadeIn(options.fadeSpeed); // and updating counter updateCounter(page); } }; // show pagination function (draw switching numbers) showPagination = function(numPages) { var pagins = ''; for (var i = 1; i <= numPages; i++) { pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;">' + i + '</a></li>'; } $('.pagination li:first-child').after(pagins); }; // perform initialization init(); // and binding 2 events - on clicking to Prev $('.pagination #prev').click(function() { showPage(lastPage); }); // and Next $('.pagination #next').click(function() { showPage(lastPage+2); }); } }); })(jQuery); // custom initialization jQuery(window).load(function() { $('#content').MyPagination({height: 400, fadeSpeed: 400}); });

Here are interesting code, here are and demonstration how to build new extensions for jQuery and also useful code for making pagination. I tried to keep comments quite anywhere to better understanding. This plugin will be able to take 2 parameters (for current moment): first – is the desired max height for generated pages and second – speed of fading effect between pages.

js/jquery.min.js

This is default jQuery library. Available in our package.

Conclusion

Today`s article told you about creating nice pagination for content, and also told about creating new own jQuery plugins. Sure that this was useful for you. Good luck!