Blog

SimplePager - an easy jquery paging plugin

This plugin has been updated with new features. Check out the blog post for the update

In a recent project, a need came up for a very simple jQuery paging plugin that would page between a small amount of data on the client side.  A quick search online didn't find any suitable candidates, so naturally we decided the best thing to do was to write one.

Introducing quickPager, simple jquery pager plugin.

A few caveats before dishing out the code - simplePager was written for a distinct set of requirements, and we're releasing it here as much as a learning tool as a fully formed jQuery plugin.

  • Before using a client-side javascript pager, decide if server-side paging wouldn't suit your needs more.  Server-side paging is usually recommended
  • This plugin will only work on one element per page
  • This plugin breaks chaining (!)

So whilst it's definitely far from perfect, this little plugin fulfills the need for an easy to use, lightweight client-side pager.

Here's the code:

//-------------------------------------------------
//		Quick Pager jquery plugin
//		www.geckonewmedia.com
//-------------------------------------------------

(function($) {
	    
	$.fn.quickPager = function(options) {
	
		var defaults = {
            pageSize: 10,
            currentPage: 1,
			holder: ""
    	};
    	var options = $.extend(defaults, options);
	  	
		//leave this
		var selector = $(this);
		var totalRecords = $(this).children().length;
		var pageCounter = 1;

		selector.children().each(function(i){
			if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
				$(this).addClass("page"+pageCounter);
			}
			else {
				$(this).addClass("page"+(pageCounter+1));
				pageCounter ++;
			}	
		});
		 
		//show/hide the appropriate regions 
		selector.children().hide();
		$(".page"+options.currentPage).show();
		
		//first check if there is more than one page. If so, build nav
		if(pageCounter > 1) {
			
			//Build pager navigation
			var pageNav = "
";
			
			if(options.holder == "") {
				selector.after(pageNav);
			}
			else {
				$(options.holder).append(pageNav);
			}
						
			//pager navigation behaviour
			$(".pageNav a").live("click", function() {			
				//grab the REL attribute 
				var clickedLink = $(this).attr("rel");
				options.currentPage = clickedLink;
				//remove current current (!) page
				$("li.currentPage").removeClass("currentPage");
				//Add current page highlighting
				$(this).parent("li").addClass("currentPage");
				//hide and show relevant links				
				selector.children().hide();			
				selector.find(".page"+clickedLink).show();
				return false;
			});
			
		}
			  
	}
	

})(jQuery);

Options

There are deliberately few options for the script - they are as follows:

  • pageSize: The amount of items per page (default 10)
  • currentPage: Want to start on a page other than one?  Put it in here
  • Holder: By default the paging nav will be inserted after the chosen element to be paged.  This allows you to create en element to hold the nav

Usage

The default usage is as follows

$(document).ready(function() { 
	$(ul.pageme").quickPager();
});

This will page an unordered list with the default options. (demo)

$(document).ready(function() { 
	$("table.pageme tbody").quickPager( {
		pageSize: 5,
		currentPage: 1,
		holder: ".pager"
	});
});

The above code will page table rows (provided a tbody element is used) with 5 rows per page, putting the navigation into an element with a class of "pager". (demo).

Download the latest version (with demos) from github.

Download the old plugin and demos here.

 

Comments are now closed

If you need more information regarding this blog post please drop us a line.

Contact Us

40 comment(s) for “SimplePager - an easy jquery paging plugin”

  1. Marc says:

    It should be working fine but I can't seem to integrate it into my source:

    < ul class = "paging" >

    //foreach($reacties as $row) {

    < li >< p class="info" >
    //echo $row['comment']; ?>< /p >< /li >
    }
    < /ul >

    I want to get a new page every 10 comments. Any idea to help me out?

  2. Dan says:

    Hi Marc

    This would depend on the markup generated. If the output is a simple list then it should work as in the example above. What is the final html markup generated by your code above?

    Dan

  3. Cem says:

    first; sorry for my bad english, and many thans for the small but great pager plugin.

    i have a problem;

    i set 2 div with same class name for pagenav holder. its work fine, but selected(current) page number does not activated.

    for example; i click 2. page, its highlighted, but other pagenav number does not highlighted.

    any solution ?

    thanks.

  4. Dan says:

    Hi Cem

    A great suggestion! I've updated the plugin to allow for multiple pager navs and have each nav retain it's "currently active" state.

    You can now see this in effect in demo 2 linked above, and you can just re-download and replace the plugin file to take advantage of the new feature.

    Dan

  5. Cem says:

    thats great !

    thanks for update Dan.

    nice work

  6. krike says:

    I'm building a cms tutorial system and on the profile page I show the latest tutorials of the user and his last favorites.

    So I would need 2 different paginations on the same page. is that possible with your plugin?

    thanks anyway

  7. Dan says:

    Hi Krike

    That is pretty high on my list of improvements to make to the script - I'll see if I can get that added this week. Unfortunately it may make it a bit less "simple", as I can imagine having to specify a holder for each pager navigation.

    I'll update this post when I get around to updating the pager script.

    Dan

  8. krike says:

    no rush, take your time :)

  9. chanlee says:

    Thanks Dan.
    It's good pager plugin.

    I'm newbie with jquery. But, try to add prev and next link to page navigation.

    http://chanlee.tistory.com/attachment/cfile3.uf@127D490E4A8A138F93A281.zip

    It's work. ^^;;

    Just using and evaluate it.

  10. Dan says:

    Hi Chanlee

    Nice work! I'll take a look at this and perhaps fold it back in to the original plugin.

    Cheers,
    Dan

  11. dev says:

    Hi I am a total newbie to jquery/programming. Was wondering if you could make it work with the Asual jquery address plugin (http://www.asual.com/jquery/address/)

    OR maybe give me a few pointers.

    any help would be really appreciated.

    Many thanks
    Dev

  12. Dan says:

    Hi Krike

    We've updated the plugin to allow for multiple instances on a single page - check the link in the post above.

    Dan

  13. Dan says:

    Hi Dev

    I've never actually seen that plugin before, but thanks for pointing it out to me. I'll definitely have a look at it and see if it makes sense to make the two plugins work together.

    Dan

  14. krike says:

    wow, that was fast. thanks :D

  15. dev says:

    Thanks Dan. Much appreciate it.

  16. KS says:

    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

  17. Dan says:

    Hi KS

    You could try calling the plugin only when the ajax on the page has completed? Also, you should use the updated version of the plugin at http://www.geckonewmedia.com/blog/2009/8/20/simplepager---jquery-paging-plugin--updated

    Cheers,
    Dan

  18. ks says:

    I posted this in the site for new version of this plugin. Anyway, I also tried to call the plugin when the Ajax is completed, but the paging number set shown several times (like 1 2 3 1 2 3 1 2 3 )
    I use your plugin with div sets (not with UL and LI sets). it works well at the first time.

  19. Dan says:

    Do you have a test page I could have a look at?

    Dan

  20. puppy says:

    Great man

  21. SEO says:

    Thank you, that has me very helped.

  22. madatanic says:

    You sir helped me a bunch. Thank you!

  23. azul says:

    Hi, i wanna try your simple pager plugin.
    Thanks for posting it :)

  24. Canser says:

    Hello Dan.

    First, thanks for this great plugin. Second, i have a question for you...

    I'm loading another page into a div using get method via jquery. The page is returning an list. (ul li....ul).

    So, i have an index.html and data.php, i'm using javascripts on index.html and loading data.php to a div in index.html.

    How can i work your plug-in in this stuation?

    Thank you Dan.

  25. Kemal says:

    Thank you very much
    Good Application... :)

  26. JS says:

    Hi Dan,

    Thanks for the plug-in.

    In my case, I am using tinysort to sort divs and quick-pager to add paging. Both of these plug-ins work best if used separately but when I try to use it together tinysort is able to sort divs page-wise but not all pages together. DO you have a suggestion?

    Thx,
    JS

  27. Willem says:

    Hi,

    I tried to implement SimplePager with divs: http://www.cv-de-kleibakkers.nl/2008-08-27/gastenboek

    but the pagination effect isn´t applied. Can´t figure out what I´ve done wrong. There is a list, in this case with comments. But these are not devided in to pages.

    Can someone help me...

  28. Dan says:

    Hi Canser

    It should work fine - you'll just need to call the plugin after you create the divs.

    Dan

  29. Dan says:

    Hi JS

    This might be a tricky one - have you got a test page?

    Dan

  30. Dan says:

    Hi Willem

    That is strange - have you tried the updated simplepager? http://www.geckonewmedia.com/blog/2009/8/20/simplepager---jquery-paging-plugin--updated

    let me know if this still doesn't work for you. Would it be possible to use a list instead of Divs?

    Dan

  31. Harm10 says:

    Nifty script you got there!
    I probably came across this one on the same site Willem did.
    I got it working for divs but it breaks down whenever somewhere in the container is another script that contains closing tags (>).
    E.g. document.write('" title="">');
    The scripts involved are hidden by "< ! - - " and "- - > " (put in extra spaces to fool submit check)
    They can't be made external because they contain data that's dependent on what's in the list.
    Is there something I can do about that or can SimplePager just copy the content without analyzing as soon as it encounters < ! - - ?

  32. Dan says:

    Hi There

    Thanks for the extra info! Do you have a test page I could have a look at?

    Cheers,
    Dan

  33. Harm10 says:

  34. Willem says:

    I will give it a try again. The first time I used a list, but that gave me padding problems in some browsers. Solving this resulted in padding problems in other browsers. I then tried it with divs. The list was good in all browsers, but I had no page numbers and three or four items (with default 10). Did all I had to do, including the jquery files.

  35. Harm10 says:

    I've created a somewhat smaller page with the script in there: http://www.qenergetic.nl/sitetest/entry/17/sp-test/weblog01#body-anchor

    This page contains a SP paging for div and ul that both work.
    The javascript inside the page container is also active but all document.write statements are commented out.
    As soon as you uncomment one of them SP fails.
    Apparently that statement is the problem.
    Could you please investigate?

    BTW I deactivated SP in the previous link so I could build further on this testsite.....

  36. ombak says:

    Wow...thats cool canlee,
    thank's lot Dan...very useful.

  37. Dan says:

    I think this is more a problem with using document.write than the plugin itself (which is just showing/hiding elements).

    Is it possible to use jQuery.append() instead of the inline document.write?

    Dan

  38. Harm10 says:

    I'll investigate your suggestion. But it would be useful that SimplePager gives a warning about the existence of these statements.
    Is that possible?
    Now you don't have any clue why it isn't working.....

  39. Harm10 says:

    Managed to circumvent this problem by using a construction with document.getElementById('idname').innerHTML

    Did you already found some time to look whether a warning is possible?

  40. salman says:

    i want to get the current page no.