SimplePager - jQuery paging plugin : Updated

Following the popularity of SimplePager - easy paging plugin, we have updated the plugin to overcome two of the major issues with the original incarnation.  SimplePager no longer breaks chaining and can now be used more than once per page.

We also replaced the old holder option (used for specifying a container for the paging) with a pagerLocation option that allows for setting the pager navigation to appear before after or before & after the paged item.

The premise behind SimplePager is to allow for creating pagination with as little effort or configuration as possible.  This pager plugin can page divs, paragraphs, list items or almost any other content.

Sample usage

The very simplest usage is shown below.

$(function() {
	$("ul.paging").quickPager();
});

Plugin options

Option  - (default)

pageSize - (10)
The amount of items to show per page

currentPage - (1)
The page to start on

pagerLocation - (after)
Where to put the pager nav? accepts before, after or both

Known Issues

Because of the removal of the "holder" option, this plugin no longer supports paging table rows.  This seemed to be an edge case anyhow, but if enough people let us know that they'd like this back we'll get it into a new version at some point.

Demo and Download

A demo is available here, and you can download a zip of the files from here.

Feedback

Please post any questions, comments or other feedback in the comments section below.

 

74 comment(s) for “SimplePager - jQuery paging plugin : Updated”

  1. 21 Aug - 4:05AM

    Gravatar for krikekrike

    awesome thanks :D testing it now.

  2. 21 Aug - 4:06AM

    Gravatar for krikekrike

    is this plugin recommended if you will have a lot of records? say you would have over 100 pages with each 15 items?

    1. 22 Aug - 8:08AM

      Gravatar for dandan

      You'd probably get a nasty flash of content before the items paged correctly. It'd probably be best to look at server-side paging in your case.

      Dan

  3. 21 Aug - 4:42AM

    Gravatar for AndreaAndrea

    Krike, it just takes longer to load.
    If each of the 1500 items will weight about 100 bytes (characters), the page will weight about 150K.
    But if each item will have an image, that page will load 1500 images, and that's a lot.

  4. 25 Aug - 10:19AM

    Gravatar for BalajiBalaji

    Very nice! I've been wondering about paging using Jquery lately. Do you have any thoughts about Jaxer?

    1. 26 Aug - 5:27AM

      Gravatar for DanDan

      Hi Balaji

      Thanks for your comment. Normally I wouldn't recommend paging on the client side, but there are cases where it may be appropriate. Jaxer does look great, but I'd like to see it become more widely adopted before trying it out on a 'real project'.

      Dan

  5. 9 Sep - 9:26AM

    Gravatar for JoelJoel

    Hi,

    I'm attempting to put in the "options" but they don't seem to be working. Unfortunately my site is not a public website at this point. Here is the code that I am using (not working):

    script language="/javascript/"
    $(function() {
    $("ul.pageme").quickPager({
    pageSize:5,
    currentPage:1,
    pagerLocation: after
    });
    });
    /script

    If I change it to this it does work, but then I have to have the same amount of items on a paginated page across my entire site:

    script language="javascript"
    $(function() {
    $("ul.pageme").quickPager();
    });
    /script

    Hopefully this makes sense.

    1. 9 Sep - 9:28AM

      Gravatar for JoelJoel

      Nevermind, I forgot the quotation marks around the values (doh!)

      1. 10 Sep - 10:43AM

        Gravatar for DanDan

        Glad you got it sorted! You did make me realise that I hadn't used these options in the demos, so thanks for pointing it out for new users.

        Dan

  6. 14 Sep - 10:10AM

    Gravatar for lukdvrlukdvr

    Is there a way to add an effect like fade in click?

    http://doubletakesolutions.com/lucas/index.html

    1. 14 Sep - 10:17AM

      Gravatar for DanDan

      Hi Luke,

      First off, nice site, and nice use of the plugin!

      It should be fairly simple to make this fade in instead of just showing. On line 101 of the plugin you'll see a line like this

      selector.find(".simplePagerPage"+clickedLink).show();

      just change this to

      selector.find(".simplePagerPage"+clickedLink).fadeIn();

      (changing 'show' to 'fadeIn'). You should find this does what you need. If not, post back and I'll see what can be done.

      Dan

      1. 15 Sep - 2:26AM

        Gravatar for lukdvrlukdvr

        Yep that did it. U da Man! Thanks for the plug-in and thanks for the help :)

  7. 18 Sep - 5:55AM

    Gravatar for John VJohn V

    Hi, You seem to have a small bug in the plugin. An extra quote is required on line 55.
    OLD:
    pageNav += "<li class=currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";

    NEW:
    pageNav += "<li class=\"currentPage simplePageNav"+i+"\"><a rel='"+i+"' href='#'>"+i+"</a></li>";

    Other than this little issue, it's a great plugin, and certainly small enough to not cause a lot of overhead. Good work!

    1. 18 Sep - 10:38AM

      Gravatar for DanDan

      Hi John

      Nice catch! Thanks for that - I've updated the plugin and zip, and credited you in the js file.

      Cheers,
      Dan

  8. 23 Sep - 11:07AM

    Gravatar for KevinKevin

    Hey Dan,
    Is it possible to lock one row to always appear?

    1. 24 Sep - 10:25AM

      Gravatar for DanDan

      Hi Kevin

      It seems so, I've put up a little demo at http://geckohub.com/jquery/simplepager/sticky/demo/1/.

      It basically works by giving your "sticky" row a class, with a style rule of

      display:block !important;

      This will stop the row from being hidden during paging.

      Hope this helps,
      Dan

  9. 15 Oct - 12:48PM

    Gravatar for VealVeal

    Great work! I found it after 2 hours of testing other plugins and... This is what i was looking for! Thx.

  10. 20 Oct - 7:31AM

    Gravatar for ShuccussyShuccussy

    Hi there, my home page is http://www.google.com

    1. 15 Jul - 10:41AM

      Gravatar for JonJon

      Eh? And who cares which page is your "HOME PAGE"!!!

  11. 16 Oct - 12:44PM

    Gravatar for fairsayanfairsayan

    I wrote a different version of Simple Pager v1.1 to uncouple the method to change pages by the object construction.
    Here you'll find: http://www.openrest.eu/docs/simplepager-proposal.php

    (website option is this form didn't accept this URL)

  12. 8 Nov - 11:27AM

    Gravatar for aveqimedia.nlaveqimedia.nl

    hi!

    Just wanted to let you know I've used your plugin and added some stuff.

    In my update you can navigate back to the page and it will automatically jump to the panel you left the page (anchor based).

    In the start of the script I've added the following:

    $.fn.quickPager = function(options) {

    var myFile = document.location.toString();
    if (myFile.match('#')) {
    var currentPageAnchor= myFile.split('#')[1];
    } else {
    var currentPageAnchor= 1;
    }

    var defaults = {
    pageSize: 10,
    currentPage: currentPageAnchor,
    holder: null,
    pagerLocation: "after"
    };

    ==================

    And on the links I've added the href to be changed:

    a rel='"+i+"' class='nav"+i+"' href='#"+i+"'

    =================

    You should also remove a return false; function.. else the URL won't change!

    Greetings!

  13. 10 Nov - 3:23AM

    Gravatar for Typo3 FreelancerTypo3 Freelancer

    Thank you ... this has me very helped.

  14. 11 Nov - 5:28AM

    Gravatar for Tomás SenartTomás Senart

    I wanted to know where is the quickPager call supposed to be placed. In the header or in the body?

    1. 11 Nov - 5:29AM

      Gravatar for DanDan

      I usually place it in the header, but I guess you could do it in the body? I've not tested this approach yet, but see no reason why it wouldn't work.

      Dan

  15. 18 Nov - 11:30AM

    Gravatar for Paul WelshPaul Welsh

    Is there any way to 'refresh' the pager?

    i have a 'ul' list that changes in length and i want to be able to 'update' the pager with the new amount of list items?

    at the moment the pager is creating a new pager directly after the last one created.

    any help would be great!

    1. 18 Nov - 11:48AM

      Gravatar for DanDan

      Hi Paul

      This is possible with a little tweak to the plugin, you can see the results of my tweaking at http://geckohub.com/jquery/simplepager/1.2/demo/1/reloadpager.html.

      One drawback is that in its current form, when the pager reloads it always goes back to page 1. If you want to maintain the current page you'd need to store the currentPage variable globally and use it when you reload the pager. This would probably then break with more than one pager per webpage.

      Hope this helps

  16. 18 Nov - 1:39AM

    Gravatar for Paul WelshPaul Welsh

    Hi Dan,

    what a quick reply! thank you!

    thats great but im having one problem, the 'simplePagerContainer' is being duplicated each time i reload the list... i cant seem to find a way to stop this?

    1. 18 Nov - 1:51AM

      Gravatar for DanDan

      Oops, should have seen that one coming!

      If you check the demo linked in my above comment this should now be fixed. Basically I run a check for the wrapper div and only apply it if it doesn't already exist.

      Good luck,
      Dan

      1. 18 Nov - 3:06AM

        Gravatar for Paul WelshPaul Welsh

        Brilliant!!

        Thank you for that, i had tried the same thing but it didn't work for some reason... must have missed something.

        I know i am asking a lot of questions, im sorry, but i have one last one.

        Next and Previous page links... is this possible or am i trying to get too much out of the plugin?

        1. 18 Nov - 3:19AM

          Gravatar for DanDan

          That's quite a common request, but I wanted to keep this plugin as simple as humanly possible as there are a lot of overly complicated pager scripts out there.

          A comment posted above links to http://www.openrest.eu/docs/simplepager-proposal.php, which starts the process of getting next/back working.

          You basically need to decouple the "go to page" function from the nav, then have two buttons that when clicked set the current page to be currentpage+1 or -1. Are you confident hacking around with the script to get this functionality?

          1. 19 Nov - 9:56AM

            Gravatar for Paul WelshPaul Welsh

            Got there in the end!

            set up 2 links that have a default 'rel' of 0 and 1... then when ever a pager link is clicked it also adds +1 or -1 to the current page number and changes the rel tag of the 'next/prev' link.

            thanks for all your help on this!

          2. 5 Jan - 6:21AM

            Gravatar for renerene

            hy,
            i really tried hard to get the prev - next page from http://www.openrest.eu/docs/simplepager-proposal.php working but i can't realize it. could you give me some simple hints to make a previous next navigation without numvers?
            regards

            1. 11 Jan - 9:16AM

              Gravatar for DanDan

              Hi Rene

              Unfortunately the improvements made on that script seemed to have a few problems, so I did't bring them back to the default install. I do hope to have time to make a few updates to the script soon.

              Dan

  17. 23 Nov - 1:31AM

    Gravatar for MichaelBMichaelB

    Hi.
    SimplePager is a very good plugin. But I'm missing the feature to page table rows.

    I changed your code a little bit. Now I can use a "holder" to page table rows. Perhaps you can integrate it again:

    I changed:
    //pager navigation behaviour
    selector.parent().find(".simplePagerNav a").click(function() {

    To:
    //pager navigation behaviour
    var pageNavParent;
    if (!options.holder) {
    pageNavParent = selector.parent();
    } else {
    pageNavParent = $(options.holder);
    }
    pageNavParent.find(".simplePagerNav a").click(function() {

    Best regards,
    MichaelB

  18. 4 Dec - 9:08AM

    Gravatar for AaronAaron

    I too need to page table rows...

    1. 7 Dec - 9:33AM

      Gravatar for DanDan

      Hi Aaron

      Did you get your table row sorting? You can try the earlier version of simplepager at http://geckohub.com/tests/simplepager/demo/2/

      Cheers,
      Dan

  19. 5 Dec - 12:21PM

    Gravatar for mrr0ngmrr0ng

    I am looking to remove (destroy) all the pager code and re-initialize it. Any easy way to do this in the code? What this is for is to re-create a new pager when new data is called by XML.

    1. 5 Dec - 12:39PM

      Gravatar for mrr0ngmrr0ng

      Nevermind, just put a call to clear the HTML inbetween all calls.
      $(".simplePagerNav").html("");

      1. 7 Dec - 9:34AM

        Gravatar for DanDan

        Glad you got it sorted!

  20. 14 Dec - 11:40AM

    Gravatar for ipip

    Hi, may I use this plugin for free?

    1. 15 Dec - 9:33AM

      Gravatar for DanDan

      Hi there ip.

      Yes, the plugin is completely free for both personal and commercial uses. All is ask is that you keep the copyright intact. I should really update the post to make this clear.

      Dan

  21. 15 Dec - 10:01AM

    Gravatar for ipip

    Please, can you upload code for previous and next links?

    1. 4 Jan - 9:49AM

      Gravatar for DanDan

      hi ip

      This is something I've been meaning to do for a while, but apologies for the continued delay!

  22. 2 Jan - 1:51AM

    Gravatar for JamesJames

    This is a really great script!, i was just wondering if anyone knew how i would change it so that instead of having all the numbers i has just a '<' & '>' signs ?

    Any help is much appreciated,

    Many thanks

    James.

    1. 4 Jan - 9:50AM

      Gravatar for DanDan

      Hi James

      This is another improvement that I do mean to add, my new years resolution will be to find the time!

      Dan

  23. 3 Jan - 9:14AM

    Gravatar for Nathan LodingNathan Loding

    The proposal that decouples the selectPage function from the rest of quickPager has some issues -- namely in traversing the DOM to add/remove the 'currentPage' class from the navigation. Instead of looking for a parent('li').parent('ul').parent... it should just look for the div containing the navigation then .find('li.currentPage').

    Otherwise, this is a great, simple little plugin. Any objections to me extending it some more?

    1. 4 Jan - 10:01AM

      Gravatar for DanDan

      Hi Nathan

      Yeh the issues stopped me from folding the changes back in to the plugin, but when I get some time I do think that the idea is a good one and should probably be implemented.

      If you're able and willing to extend it i'd be happy to add the changes to the main plugin with full accreditation.

      Dan

  24. 22 Jan - 7:17AM

    Gravatar for Yulka Plekhanova Yulka Plekhanova

    Thanks a lot for a nifty plugin. I spent hours trying to get various pagination plugins to work correctly and finally found one that works great for my case:)

  25. 29 Jan - 9:33AM

    Gravatar for Adam CourtemancheAdam Courtemanche

    I've made a quick modification to add a class of 'first' on the first pager nav li, and a class of 'last' on the last pager nav li. This gives you greater control over styling (like putting a left border on the all but the first nav item). You may actually be able to get the same results using CSS first-child and last-child pseudo-selectors.

    Anyway, here is the code: http://pastebin.com/f5b314017

    1. 29 Jan - 9:44AM

      Gravatar for AdamAdam

      You CAN use the css first-child pseudo-class to handle the first li differently. So, no need to modify your code! It works great as is. Thank you very much.

      Here's an example to get a nav like:

      1 | 2 | 3 | 4 | 5

      ul.simplePagerNav li{
      display:block;
      float: left;
      padding: 0 7px 0 7px;
      border-left: 1px solid #ccc;
      }

      ul.simplePagerNav li:first-child{
      border-left: none;
      }

  26. 8 Feb - 2:28AM

    Gravatar for Omnia Omnia

    its really great.
    but i have a problem when i run it on IE8 it works fine but on IE7 it didn't display the page number.
    any one what is the prople.

    1. 15 Feb - 11:00AM

      Gravatar for DanDan

      Hi Omnia

      Is the demo at http://geckohub.com/jquery/simplepager/ working in IE8 for you? It all seems well here, so perhaps your problems are a result of some changes you made?

      Perhaps if you have a test page I could have a look?

      Dan

  27. 1 Mar - 8:10AM

    Gravatar for MarcMarc

    Hello friend!

    I need help, i have a problem with simple pager, when run in the navigator show an error .live function

    $(".pageNav a").live is not a function
    [Break on this error] $(".pageNav a").live("click", function() {

    and not as a workaround, I've tried everything.

    Thanks to all!

    1. 2 Mar - 9:39AM

      Gravatar for DanDan

      Hi Marc

      Which version of jQuery are you using? I've only really tested this with 1.3.2, but it should work for the new 1.4.x versions too. It looks like you may be using 1.2.x

      Dan

      1. 2 Mar - 2:07AM

        Gravatar for MarcMarc

        OOOH shit!

        i'm using the jquery version 1.2.x. i changed to 1.4.x version and was running perfectly.

        Thanks!!

        1. 2 Mar - 2:20AM

          Gravatar for DanDan

          Heh, no worries! Glad you got it sorted

      2. 9 Mar - 6:28AM

        Gravatar for BmacBmac

        when will be the next and previous buttons be added to this project? I think that's all it needs to be the most useful and complete jquery pager over the net.

        1. 10 Mar - 10:17AM

          Gravatar for DanDan

          Sorry man we've been very busy recently. It's definitely on my "when you get 30minutes" list!

        2. 12 Mar - 12:04PM

          Gravatar for DanDan

          Hi Bmac

          You'll be pleased to hear that a kind user has sent me a mod to the script to include next nad back buttons. I just have one minor kink to work out and I'll post it in a new blog entry.

          Thanks for your patience!

          Dan

  28. 19 Mar - 7:46AM

    Gravatar for satheeshsatheesh

    nice work! keep rocking. i have one doubt in this. how i add "previous" and "next" link in this paging

    1. 19 Mar - 9:21AM

      Gravatar for DanDan

      Hi Sateesh. The most requested feature!

      I have a version that some kind people sent to me that has next and back buttons, but unfortunately it has a bit of a bug that I haven't had time to fix yet, but here it is http://geckohub.com/jquery/simplepager/quickpager.beta.jquery.js

      Dan

  29. 6 Apr - 6:24AM

    Gravatar for JeffJeff

    Hi Dan. I would like to know if you have the older js file that has an option for tables?

    Thanks.

    1. 6 Apr - 9:44AM

      Gravatar for DanDan

      Hi Jeff

      Yep, it's online at http://www.geckonewmedia.com/blog/2009/7/15/simplepager---an-easy-jquery-paging-plugin

      Hope this helps,
      Dan

    2. 6 Apr - 9:44AM

      Gravatar for DanDan

      Hi Jeff

      Yep, it's online at http://www.geckonewmedia.com/blog/2009/7/15/simplepager---an-easy-jquery-paging-plugin

      Hope this helps,
      Dan

      1. 7 Apr - 8:33AM

        Gravatar for JeffJeff

        Thanks Dan.

  30. 27 Apr - 11:01AM

    Gravatar for m@rkm@rk

    Dear Dan,

    I can't get it to work - neither with div's nor with ul/li's. Is a HTML code example available somewhere? I've been looking for a working HTML example for hours so far ...

    Thanks in advance & brgs

  31. 27 Apr - 11:25AM

    Gravatar for DanDan

    Hi Mark

    Did you check the example at http://geckohub.com/jquery/simplepager/ ? It should work for divs and ULs without problem - do you have a test page?

    Dan

    1. 27 Apr - 4:55AM

      Gravatar for m@rkm@rk

      Hi Dan, thank you for your quick reply and assistance.

      Meanwhile I figured out I was concerned about another pager-plugin ;-) Let me summarize:

      Your SimplePager (or "QuickPager"?) offers equal functionality like another "jQuery pager" plugin I found at http://rikrikrik.com/jquery/pager/ .

      But what I actually trying to implement was the "jQuery UI SimplePager": http://plugins.jquery.com/project/ThemeReadySimplePager

      It seems to offer a slim prev/next-navigation I'd need for my project, but I can't get it to work :-( Sorry for the confusion ...

  32. 29 Apr - 2:58AM

    Gravatar for AsliAsli

    how can i embed this into the jsp. i can not understand? how can the list be iterated? please help.

  33. 8 Jul - 10:46AM

    Gravatar for KSKS

    Hi, When I use it with dynamically generated page by Ajax, the quickPager() is not working. If I use it whenever the dynamic page is changed, the navigation number set shown multiple. I thing there is a method like reload() or stop(), it would be great. Do you have any solution? Thanks from Korea

  34. 14 Jul - 9:34AM

    Gravatar for KoethenKoethen

    Thank you. It works at one site for my webpage (see link) fine.

  35.  

Have your say…

  1. HTML is not allowed!

  2. Do not fill this in

© 2010 Gecko New Media Ltd, All Rights Reserved.