Friday, February 24th, 2006

Rich, accessible pagination with unobtrusive javascript

Category: JavaScript, Programming, Usability

In this post on, there’s a walk-through (complete with code) of a method for doing pagination with Ajax that’s both simple and accessible.

I’ve seen a few questions about doing pagination with AJAX, and I don’t like the thought of it. It smells of accessibility problems. I’ve addressed this issue before in my own toy pages (since I don’t actually write production web code), so thought I’d share it.

The entry is broken up into parts – the “Problem Definition”, “Six steps from vanilla HTML pages to AJAX pages”, “The Code”, “A brief explanation”, and some “Improvements” (and suggestions) he’s made to make the original code cleaner.

For each of the sections, he details the step, being sure to lay out the problem completely before diving into the code. The “Six Steps” help with this, providing the “peudo-code” for him to follow when working it up. The system is built on top of a PHP and MySQL backend and uses JSON for the actual data transfer. The current location and previously viewed pages are stored in the database, and he code is such that it will fall back to the normal anchor tag links if Javascript it turned off.

Posted by Chris Cornutt at 9:41 am

3.5 rating from 19 votes


Comments feed TrackBack URI

This is rather interesting to me, as I’ve been thinking about implementing the same thing for an application I work on. I was thinking, though, that it would probably be advantageous to cache those pages that can be got to in 1 step from the current page (i.e. first, last, next and previous in a typical paging setup) so as to provide pretty much instantaneous ‘page loads’ even over a slower connection. This looks like it will be a good starting point.

Comment by Greg — February 24, 2006


Comment by hgfh — May 23, 2006


Comment by vikas — June 29, 2006

This is a stupid and brainless way to explain the code to the user. I could not use this code because here he did not give full code and proper explanation. For example here he has used a word “json”, but how can the user knows that. what is that and where we get that variable, all the details he has to produced. So plz Dont submit the code with not understandable format. Its a waste of time for the user.

Comment by Mohamed Farook — January 22, 2007

Mohamed, I’m not sure what you’re confused about. There are two occurrences of the variable json in the code, one in php and one in javascript. Both have declarations and definitions right in the code:

$json = array(‘n’=>$num_pages, ‘p’=>$pg, ‘l’ => array());

var json = eval(“(” + o.responseText + “)”) ;

The article also links to a working example ( of the code where you can get the complete code.

Hope this explains your doubt.

Comment by Philip Tellis — January 23, 2007

Leave a comment

You must be logged in to post a comment.