Home arrow Java arrow Page 2 - Building a Pagination System with AJAX

Building a Pagination System with 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.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 138
June 05, 2006
  1. · Building a Pagination System with AJAX
  2. · Building the dynamic scroll bar
  3. · Defining the scrolling systemís CSS declarations
  4. · Defining the (X)HTML markup and JavaScript functions

print this article

Building a Pagination System with AJAX - Building the dynamic scroll bar
(Page 2 of 4 )

In order to start building up the AJAX-driven scrolling system, first I must create the dynamic scrollbar. It will be the key element that commands the whole application, instructing when to fetch new records from the corresponding database table and displaying chunks of rows.

In short, Iím not going to utilize a real scrollbar, like the one displayed on certain (X)HTML elements, but Iíll create a fake one, comprised basically of two DIVS. The first DIV will be the element responsible for displaying the background of the scrollbar, in conjunction with the corresponding scrolling arrows, while the second one will show the proper handle. As you might have guessed, the position of this handle along the scrollbar will control how and when to fetch new packets of database records.

Since the previous description will be best understood with some images, take a look at the pictures below. They show the background images that Iím going to use for each DIV element of the dynamic scrollbar, along with a screenshot of the application in action:



As you can see, the first two images depicted above show clearly how the dynamic scrollbar will be constructed, while the last one exemplifies how the application will display different sets of database records. Regarding the creation of the dynamic control bar, the first DIV element will hold the handle, while the second one will be used for displaying the complete scrollbar.

Obviously, these two elements properly overlapped will simulate a real (X)HTML scrollbar. In this specific case, the handle can be programmatically controlled via JavaScript to trigger HTTP requests in the background, in accordance with its physical position within the containing scrollbar.

However, thereís still one question that remains unanswered: how will the above handle be turned into a ďslidingĒ element, in this way simulating a real scrollbar element? Well, to achieve this, Iíll use the help of a good JavaScript library, in order to make the DIV that contains the handle a ďdrag-and-dropĒ control. But in fact, Iím getting ahead of myself, so letís continue for the moment exploring other topics.

All right, now that you know how the dynamic scrollbar will be created, the next step rests on defining the corresponding CSS rules, along with the (X)HTML markup that will make up the user interface of this AJAX-driven scrolling system.

With reference to building the graphical interface, over the course of the next section, my attention will be focused on defining the pertinent CSS styles that control the visual presentation of the application, therefore wait no longer and read the next few lines.

blog comments powered by Disqus

- Java Too Insecure, Says Microsoft Researcher
- Google Beats Oracle in Java Ruling
- Deploying Multiple Java Applets as One
- Deploying Java Applets
- Understanding Deployment Frameworks
- Database Programming in Java Using JDBC
- Extension Interfaces and SAX
- Entities, Handlers and SAX
- Advanced SAX
- Conversions and Java Print Streams
- Formatters and Java Print Streams
- Java Print Streams
- Wildcards, Arrays, and Generics in Java
- Wildcards and Generic Methods in Java
- Finishing the Project: Java Web Development ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials