Javascript Dynamic Paging (MooTools Pager)
Couple of days ago I had to create a content pager which can dynamically insert page numbers including previous and next buttons.
The reason why I had to use Javascript and not any server side solution is quite interesting – the paging method should not really divide the content into different web pages. This is needed because if the text we want to split contains any XHTML markup and we divide it into separate web pages the markup will be broken (invalid). Just imagine having opening <div> tag in the first page and closing in the second – not cool! Other break point is if we just split some tag in two.
Using my favourite Javascript Framework – Mootools and with couple of XHTML/CSS tricks I could get it working with the following code:
// This Javascript is written by Peter Velichkov (http://www.creonfx.com) // and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/ // Use and modify all you want just keep this comment. Thanks var pagerPageHeight = $('warper').getSize().y; var contentArea = $('content'); var pagerCurPage = 1; var pagerPagesCount = 1; var pagerPages = $('pager'); var pagerInit = function(){ var contentHeight = contentArea.getSize().y ; pagerPagesCount = (contentHeight / pagerPageHeight).toInt(); if (contentHeight % pagerPageHeight != 0 ) pagerPagesCount++; if (pagerPagesCount === 1) return; var prev = new Element('a', { 'class': 'cust-pager-prev', 'html': '&lt', 'id': 'cust-pager-prev', 'events': { 'click': function(){ pagerChangePage(pagerCurPage - 1); } } }); var next = new Element('a', { 'class': 'cust-pager-next', 'html': '&gt', 'id': 'cust-pager-next', 'events': { 'click': function(){ pagerChangePage(pagerCurPage + 1); } } }); prev.inject(pagerPages,'top'); $('cust-pager-prev').setStyle('display','none'); for (var i=1; i<=pagerPagesCount; i++){ var anchor = new Element('a', { 'class': 'cust-pager-item', 'id': 'cust-pager-item-'+ i, 'html': i, 'events': { 'click': pagerChangePage.pass(i) } }); anchor.inject(pagerPages); } next.inject(pagerPages,'bottom'); }; var pagerChangePage = function(page){ $('cust-pager-item-' + pagerCurPage).set('class', 'cust-pager-item'); $('cust-pager-item-' + page).set('class', 'cust-pager-item-sel'); pagerCurPage = page; if (pagerCurPage === 1) { $('cust-pager-prev').setStyle('display', 'none'); }else{ $('cust-pager-prev').setStyle('display', 'inline'); } if (pagerCurPage === pagerPagesCount) { $('cust-pager-next').setStyle('display', 'none'); }else{ $('cust-pager-next').setStyle('display', 'inline'); } contentArea.setStyle('top', (-1) * pagerPageHeight * (page - 1)); }; pagerInit();
The example and the picture as usual.

Tags: JavaScript, Mootools, pager, paging
However I tend to disable it for small blogs like this one. If you would like to help me pay for my webhosting please allow your Adblocking software to show adverts from this site. Thanks!














August 17th, 2008 at 9:23 pm
Great idea!
August 18th, 2008 at 9:28 pm
Thanks – Haven’t figured it all by myself
December 30th, 2008 at 4:16 pm
It is not working when i used ..please tel me how to use this
January 2nd, 2009 at 11:13 pm
refer to the example
February 2nd, 2009 at 10:36 am
its not working please tell me how to use this paging
please its urgent
please tell on this mail address…..
February 2nd, 2009 at 11:28 am
Did you checked the example? It is quite simple
February 19th, 2009 at 8:45 pm
hi, im having problem, pager does not appear it ends on something like check screenshot http://img142.imageshack.us/my.php?image=51917501da6.jpg
any ideas ? thanks…
March 20th, 2009 at 1:48 am
Beautiful, works like a charm…
it’s a great job…since it’s open to customization
thanks for the code !
April 22nd, 2009 at 1:12 pm
its not fully working in chrome browser..?
April 22nd, 2009 at 1:43 pm
@pardi – Haven’t tested, maybe mootools has some problem with chrome. Will check it soon.
June 9th, 2009 at 12:43 pm
This script is very handy, thanks
Just want to mention your code above contains escaped characters
i.e. < instead of <
June 15th, 2009 at 3:15 pm
@Peter
Great script, I’m going to use it
One note – you should use ‘visible: none’ instead of ‘display: hidden’ for ” symbols since using second one causes whole pager to change it’s position after user clicks on it.
June 15th, 2009 at 3:21 pm
@ Paul – I guess you are refering to visible:hidden instead of display:none, but yeah it makes sense