How to create easy pagination with jQuery

Date: 08th Mar 2011 Author: admin 74 Comments
Posted in: JavaScript, jQuery, XHTML |Tags: , , , , ,

How to create easy pagination with jQuery

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
download in package

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
download in package

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!

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

74 Comments

    • Graham's Gravatar
    • If your content is tall enough to cause a vertical scroll, and you then click a paging link, you do NOT scroll back to the top. Is this preferable to the normal page refresh behavior? Not to me.

    • Josh's Gravatar
    • Gernot's Gravatar
    • Why would you want to use pagination at all for such a small dataset? Pagination is meant to break large sets of data into smaller chunks to reduce network traffic. You cannot send 10’000 objects to the client, right?

      Client side pagination does not make any sense to me. Besides, pagination should change the url. Otherwise, you cannot send the url of “page 3″ to a friend.

    • Jo's Gravatar
    • What I like is the ability to name the paragraphs that should be paginated.
      All the other jquery plugins just take all children of the container, which is not detailed enough for a lot of use cases.
      @Gernot
      Basically I agree with you. But not every design wins if one needs scrolling. Imagine a sidebar which displays concert data, say 3 at a time and the total of entries is around 20. Then, IMHO, it’s perfect to load all data and display small fractions with client side pagination.

    • Phere's Gravatar
    • I am trying to integrate a dropdown element that dynamically changes the value of paragraphsPerPage on change. Do you have any idea of how I can do that?

    • Marcus Tucker's Gravatar
    • Marcus TuckerMarch 30, 2011 2:53 pm

      It’s not much of a tutorial, it’s more “here’s some code that does paging”… and the paging effect isn’t very pleasing – counting paragraphs inevitably leads to uneven page sizes. Defining a vertical page height and then intelligently splitting the content into pages according to that height (rounding up/down depending on the size of the paragraphs) would be much better, but alas that’s not what it does.

    • jtg's Gravatar
    • Hey, what a strange loop in showPage, use .slice() to get specified part of array, Luke :) Also script destroys source block (inline styles, attributes etc.) Something like this will be much better


      this.blocks.slice( (page-1 ) * this.blocksPerPage, /* start */
      ((page-1)*this.blocksPerPage) + this.blocksPerPage /* end */
      ).each(function() { html += $(this).clone().wrap('').parent().html()}); //get outerHTML (lol)
      $(this.pagingContainer).html(html);

    • Dina's Gravatar
    • Tnx for sharing.
      Im going to try this with my application but i dunno how far this code is going to help..!!

    • sajjakumar's Gravatar
    • can u please guide me to get the code for defining a vertical page height and then intelligently splitting the content into pages according to that height…

    • sajjakumar's Gravatar
    • Thank for ur reply….
      A single div containing raw text which can be fitted in 100×100 px div and remaining content (which is in hidden) also fit the same 100x100px div displaying with prev/next buttons using height of the div instead of paras…

    • sajjakumar's Gravatar
    • imtech_pager.js is cute… and is it possible to change the code for “div height”

    • JQuerty's Gravatar
    • This is brilliant. I had a one page gallery and this has helped me paginate it. I played around with the position of the page numbers to get them at the top and all works well.

      Apart from Internet Explorer. Using images with this plugin, in IE makes for empty images.

      Good work though!!!

      Thanks
      J

    • sajjakumar's Gravatar
    • Thanks a lot….It works…
      can i have nay suggession regarding paginate info as 2/5 of 5/5 instead of 1 2 3 4 5

    • sajjakumar's Gravatar
    • Thanks Sir…. It works well. But it displays as 1/3, 2/3, 3/3. My idea is to show current page only. suppose i click the 2nd page it should display 2/3 only. If i click next it should show as 3/3. Sorry for troubling again

    • sajjakumar's Gravatar
    • Thanks for ur prompt replay. I used PREV / NEXT for the browsing pages..

      pagins += ‘<a href="#" rel="nofollow">’ + i + ‘/’ + numPages + ‘</a>’;
      }
      $(‘.pagination li:first-child’).after(pagins);
      };

      // perform initialization
      init();

      code not copied correctly. Pl. check now if it is possible pl do the needful sir

      // and binding 2 events – on clicking to Prev
      $(‘.pagination #prev’).click(function() {
      showPage(lastPage);
      });
      // and Next
      $(‘.pagination #next’).click(function() {
      showPage(lastPage+2);
      });

    • kevin's Gravatar
    • Hi there, i’ve been testing this code to create a simple pagination (obviously) and couldnt manage so far to get it work a 100%.

      I got a WordPress site, and on one page i’m generating a list of events (thanks to the Event Calendar Plugin). This is where i’d like the pagination to come to life. I set up all requested elements and it seems to work as i get the correct pagination showing up at the bottom. But my blocs that should be paginated are all displayed.

      If i change the pager.paragraphsPerPage parameter, it does update the pagination numbers at the bottom but still, i get all the blocs.

      My ‘blocs’ are in fact tags within a . I thought that could be the reason why it wasnt working, so i tested this configuration in a minimal test page, one with an id for the pager.pagingContainer parameter and a list of for the pager.paragraphs parameter. And it works fine, with no css at all.

      Any chance someone’s ever seen this bug?

    • Half Marathon's Gravatar
    • Half MarathonJune 12, 2011 1:56 am

      Thanks sharing, but the tutorial couls use a little more explination.

    • rahul's Gravatar
    • Nitish's Gravatar
    • Hello,

      Amazing script..

      One doubt .. I am using this script to paginate some form items.

      A list of items gets populated from the database. It has some text fields and some check boxes. If I enter some value in a text box or check a checkbox on page 1, when I move to page 2 and come back to page 1 the values get reset.

      Is there a way to retain form values from one page to another.

      thanks

    • Irne's Gravatar
    • hello i just want to ask how to create alphabetical (A-Z) pagination instead of Number (1-9), but i want to create a list in such a way so when you click on letter A it should only show A list only not all the list below. if you click B it will show only B list. how will i make like that??

    • webmelbs's Gravatar
    • webmelbs's Gravatar
    • Instead of a numbered menu is it possible to have titles? Perhaps use the id of the div as the title? That would be the bomb!

    • webmelbs's Gravatar
    • Tabetha's Gravatar
    • I have a page that has tabbed content. I want the pagination to only allow 8 images per tabbed content holder. I have the first one working, but I need to get the second tabbed content to work. How do I add multiple instances of this pagination script to the same page?

      If you need to see my code let me know. :)

    • brijendra kumar's Gravatar
    • brijendra kumarJanuary 30, 2012 6:53 pm

      imtech_pager.js is cute… and is it possible to change the code for “div height”

    • Scott's Gravatar
    • Great script. I am trying to incorporate this to use with a gallery of images. I am using jquery lightbox evolution for the image part and have the pagination working perfect in both FF and Chrome. However in IE8 & 9 it only shows the first page of images. As soon as another page is selected all images vanish. Any thoughts as to why this only happens in IE and how I may fix it?

      http://www.scottamayer.com/example35/

      Many thanks
      Scott

    • QM-B's Gravatar
    • Thank you for the nice script. It’s working well, but if I like to use jQuery colorbox inside for images I’m still running into trouble and colorbox doesn’t appear. The same, if I set one of both in noConflict().. Any idea how to solve?

    • k0s's Gravatar
    • It is not working in IE 8/9 with jQuery 1.7.2, but if you downgrade to 1.3.2 (like in DEMO) it is working. Please fix this problem.

    • BABA's Gravatar
    • Hello friends, I want to use PREV / NEXT for the browsing pages…also regarding paginate info as 1/5 2/5 3/5 …
      I’m not able use the exemple in top because ,I ‘m beginner in JQuery
      please friend help me if you can give me the code complet .
      thank you very much :)

    • Lemuel's Gravatar
    • Same problem with IE 8/9. First page display is fine. After that pages are empty because $(this).html() is always empty. In fact, every (pages.paragraphs)[i].innerHTML is set to ”. There are no .js errors, just empty pages.

    • Lemuel's Gravatar
    • Same problem in IE 8/9. First page displays correctly, after that all pages are empty. Investigation shows every $(this).html is empty. In fact, (this.paragraphs)[i].innerHTML seems to be set to ” for every [i]. No js errors, just empty pages.

    • Lemuel's Gravatar
    • Here is the problem:
      alert((this.paragraphs)[0].innerHTML);
      $(this.pagingContainerPath).html(html);
      alert((this.paragraphs)[0].innerHTML);

      In FF, the both alert box contents are the same. In IE, the second box is empty.

    • Lemuel's Gravatar
    • Fixed it. In the set up section add the new line:
      pager.paragraphs = $(‘div.mainNewsItem’); // set of required containers
      items = $(‘div.mainNewsItem’).clone(); <– new
      pager.showPage(1);

      Then change:
      this.paragraphs.slice((page-1) * this.paragraphsPerPage,
      to:
      items.slice((page-1) * this.paragraphsPerPage,

    • iMaxEst's Gravatar
    • One of the main roles of navigation is a page listing of items list. Product list, news, whatever… Imagine situation, when user clicked on some product in that list, to read detailed description of it. After reading as a general rule, a typical user clicks BACK button of his browser, to return to the products list for further navigation. And what hi gets? Right, hi gets FIRST page of navigation, but not the same one, with which he went to look for details about the selected product. But mast be!. While I can not find a suitable navigation system with jQuery usage, which would take into account this is a required parameter settings.

    • babis's Gravatar
    • hello and thanks for the script !
      I want to ask you how can i add a transition effect when a new page loads;

    • Evan's Gravatar
    • I’m running into some issues with when you fire the showPage(); in IE7+ the entire content div goes blank. I’d love to pick your brain about that if you can shoot me an email :) This is ideally what i was looking for in a jQuery pagination. Thanks for the nice work.

    • erhan's Gravatar
    • ranmaru moriz's Gravatar
    • Libby's Gravatar
    • Hi, I had a question. There seems to be an issue in IE in how it reads line 21 in imtech_pager.js. When you click to second page it cannot read the html() of the items. I believe it’s because IE reads the slice as slice(xy) as opposed to slice(x y) in other browsers…I may be way off on this. Any ideas or a fix? Great script!

    • Denford's Gravatar
    • thanks dude woks like a charm, saves me rewriting the logic to do that every time i need pagination.

    • Hitesh's Gravatar
    • How do i get the page to start from the top – article/para/line of the content once we click on page 2?

    • Aaron's Gravatar
    • Hello,

      Great tutorial but I like some other posters am having issues with this using older versions of jQuery. For those of us that work with older applications having it run on older versions would be great. I have it narrowed down to IE 7 and IE 8 not liking your JS when using older versions of jQuery. As an earlier poster said it is hiding the content divs. Is there a workaround for this? For example set your jQuery to be something like 1.3.2 and your browser to IE 8 at the minimum. Your code is by far the cleanest and easiest to use so I really don’t want to have to use another version that is out there. :(

    • vipin's Gravatar
    • hello admin,

      i am a trainee sotfware proffesional. i have been assigned a project Social Network.
      my index page is the page where viewer can see posts. 10 posts per page are allowed .and d posts should be with username .
      how to do that.
      regards ,
      vipin

    • owais's Gravatar
    • Sandy's Gravatar
    • Hi Admin,

      I am looking for manual pagination with prev(button), manual input (text box), number of pages, next(Button). in javascript including jquery can you please provide me the required Code.

      Thanks
      Sandy

    • Szabolcs's Gravatar
    • Hello,
      the script works well, but I have a little problem. I’m using jQuery slideToggle and slideUp to show/hide divs on my page. When the site is loaded, on the first page everything works like a charm, slideToggle too. But when I choose another page, your script is working well, but the show/hide function stop working, even if I choose first page again. When I reload the site everything is OK again. It’s so strange and annoying… Any idea on this? :-)

Leave a Reply to Scott Cancel reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>