Monday, June 5th, 2006

Building a Pagination System with AJAX

Category: JavaScript, Programming

DevArticles has the first part of a new series posted today – a look at the creation of a pagnation system with a little help from Ajax.

You know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You’ll know how to do that by the end of this series! This first article shows you how to build the user interface.

They mention a better name for the system a bit further down – a “dynamic scrolling system”, a method of displaying the data from your database a page at a time. The first few results are shown to start, but as the user scrolls the area down, new entries are grabbed by the Ajax script from the database.

They start off the work with the creation of the scrollbar – a “fake” one created from two DIVs styled correctly. This will work just like a normal scrollbar thanks to some handy Javascript functions and nice CSS styling. They only go so far in this one to create the container and this scrollbar, but keep checking back for more updates – next up is defining the actual Javascript (not just placeholders) to make the scrolling work and making the Ajax requests for the data.

Posted by Chris Cornutt at 3:21 pm
9 Comments

+++--
3.1 rating from 83 votes

9 Comments »

Comments feed TrackBack URI

These guys: http://www.mpire.com

Do a really good job of this in their listing tool. I’ve tried picking apart their code but it’s kinda complicated.

Comment by John Similson — June 5, 2006

[…] Comment construire un système de pagination en Ajax : Ajaxian.com […]

Pingback by En vrac #4 at Gate Nine — June 6, 2006

I’m sorry, but non-native scrollbars are surely a signpost that you’re hurtling down the road to hell with reckless abandon. You can just make an absolutely positioned element inside of a overflow: auto; element and get the same effect without breaking all kinds of native behaviors that users rely on.

Oof.

Comment by Alex Russell — June 6, 2006

At openRico.org we’ve had a live grid using a scrollbar to replace pagination using Ajax for about a year, whats more ours manages data caching and buffering preventing any problems with network latency..

A guide on how to use it unobtrusively and replace pagniation links will be published shortly, so you can have accesible and resposive data presentation…

Comment by Ros — June 6, 2006

A nice idea, but no, fake scrollbars are simply not going to cut it. NEXT!

Comment by Marty — June 6, 2006

Beyond the scroll bars …
I am not a fan of scrolling pagination period. In some cases its fine, but there has to be an available option to quickly navigate to page X. If I find an item at position 1240 in the search results, leave the search page and come back, I don’t want to scroll all the way to it when I know it was on page 12. That why I hate the M$ Live demo. A simple dropdown to fetch the appropriate page via AJAX is all that’s needed.

Comment by Dan — June 7, 2006

Sorry but using pages for grid data is simply a hack, an aberration necessitated by the pre-ajax scalability issues of web applications. What reasonalbe non-web application has ever used the concept of pages to display grid data?
The fact that an ajax application is going to the web and dynamically pulling data or pulling from an in-memory datacache should be completely transparent to the user, the purpose when using this technology with ajax is to minimize roundtrips. Search, sort and filter should similarly work in a manner that works transparently from the users perspective. The goal is to produce a rich-client experience on the web that mimics in all aspects traditional client server and scales to the web.

Comment by Charlie — August 27, 2006

Alex,

I’ve been using your stuff since 2002 (netwindows) and looking forward to checking out dojo. Just want to point out that a virtual scrollbar has distinct advantages for large datasets.
Large amounts of data can be stored in memory on the client as an xmldomdocument. Rendering large amounts of data as dhtml is very costly especially as the user can only see a small subset of the data at any given moment. Think of the “ajax” screen as a virtual window on the dataset that can be sorted or filtered dynamically then displayed in the virtual window with eyeblink speed without altering the underlying data. This arrangement would benefit greatly from a virtual scrollbar.

Charlie

Comment by Charlie — August 27, 2006

There is a place for this. Though native scrollbars are preferred, there is the issue of them being rendered above ANY z-index. If you have a grid in the center of the page and you create DHTML tooltips or something like that the scrollbar will always be on top and will interfere with any DHTML you try to layer above it. In this case “artificial” scrollbars are a great solution as you can control which layer they render on.

Comment by Andrew — February 22, 2007

Leave a comment

You must be logged in to post a comment.