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.
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.
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.