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 (
// and is distributed under the following license :
// 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': '&amp;lt',
			'id': 'cust-pager-prev',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage - 1);
	var next = new Element('a', {
			'class': 'cust-pager-next',
			'html': '&amp;gt',
			'id': 'cust-pager-next',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage + 1);
	for (var i=1; i&lt;=pagerPagesCount; i++){
		var anchor = new Element('a', {
			'class': 'cust-pager-item',
			'id': 'cust-pager-item-'+ i,
			'html': i,
			'events': {
				'click': pagerChangePage.pass(i)
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');
		$('cust-pager-prev').setStyle('display', 'inline');
	if (pagerCurPage === pagerPagesCount) {
		$('cust-pager-next').setStyle('display', 'none');
		$('cust-pager-next').setStyle('display', 'inline');
	contentArea.setStyle('top', (-1) * pagerPageHeight * (page - 1));

The example and the picture as usual.

Custom Pager

Tags: , , ,

23 Responses to “Javascript Dynamic Paging (MooTools Pager)”

  1. Vesko Kolev Says:

    Great idea!

  2. Peter Says:

    Thanks – Haven’t figured it all by myself ;)

  3. bhaarathiya Says:

    It is not working when i used ..please tel me how to use this

  4. Peter Says:

    refer to the example

  5. mehul shah Says:

    its not working please tell me how to use this paging
    please its urgent
    please tell on this mail address…..

  6. Peter Says:

    Did you checked the example? It is quite simple

  7. doubleop Says:

    hi, im having problem, pager does not appear it ends on something like check screenshot
    any ideas ? thanks…

  8. damien Says:

    Beautiful, works like a charm…
    it’s a great job…since it’s open to customization :)

    thanks for the code !

  9. pardi Says:

    its not fully working in chrome browser..?

  10. Peter Says:

    @pardi – Haven’t tested, maybe mootools has some problem with chrome. Will check it soon.

  11. will Says:

    This script is very handy, thanks

    Just want to mention your code above contains escaped characters

    i.e. < instead of <

  12. Paul Says:


    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.

  13. Peter Says:

    @ Paul – I guess you are refering to visible:hidden instead of display:none, but yeah it makes sense

  14. Ute Says:

    Great job, thanks a lot!

  15. Darby Says:

    Loved it. It would be awesome if you can have a scrollbar within the content section as well. Is this possible?

  16. Peter Says:

    @Darby – It should be, play with the overflow property of the container

  17. Petr Hrudka Says:

    Great piece of code, it exactly matches what I need :)



  18. vaibhav Says:

    Nice but one drawback words split between pages in bottom and start point.
    anyways thanks for sharing ur script.

  19. Aloy Says:

    Nice script. In each of the pages i need it to show say ‘page 1 of 50’ then few proceeding page numbers, then previous and next. If my page will come to 70 pages using the script, i need to make the paging and numbers appear nice. Any help on this?

  20. Al J Says:

    Very nice script!
    Any thoughts on how to prevent the text beeing cut at the bottom, and top of the page?

  21. Jmm Says:

    Can anyone provide me with the second page of the code. Completely new to javascript.

  22. James Says:

    Why do you need javascript to do this? Why not just set anchors, add a fixed height to the content div and hide the overflow? Pure HTML and CSS, looks exactly the same, and no need for JS or MooTools…very simple, same effect.

  23. Pritesh Says:

    Very Useful script for pagination