Paging Records on the ClientBy Scott Mitchell
Displaying database results in a paged format is a common task in ASP pages. When dealing with a large number of records, it makes sense to display those records only, say, ten at a time, so as to make the information easier to consume for the Web visitor. There are a number of articles on 4Guys and other ASP Web sites that demonstrate a plethora of ways to page database results. A few of the better articles include:
- Paging Through Database Records Using a Stored Procedure
- Database Paging Sample Code
- Paging Records with
All of these articles, however, perform the paging on the server-side. For example, imagine that we have thirty database records that we wish to display to our users ten records at a time. When the user requests the first page of data, the ASP page snips out the first ten records and sends them to the client. When the user is ready to view the next ten records, he will click a link, causing the ASP page to be reloaded, passing in a new page value through the querystring, most likely. The ASP page will grab out records 11 through 20 and shoot them to the user.
Examining the Needed Client-Side Script
So what client-side script do we need to have our ASP page generate in order to display our paged database records? As aforementioned, we need to create a client-side array. Since we're going to display our database records in an HTML table, we'll create an array of HTML that will properly display an HTML TABLE row (
Database Value </td></tr>). This array will contain all of our database
elements we wish to allow the user to page through.
Finally, we'll also need some way to dynamically alter the display of an HTML page without requiring the
page to be refreshed. This can be accomplished through dynamic HTML (DHTML). To implement this we will need to
create an HTML
code we can dynamically work with the contents in this
DIV tag. (This article will not attempt to
explain the semantics or workings of DHTML; for more information on using DHTML be sure to read:
An Introduction to Dynamic HTML
and A Tutorial in Cross-Browser DHTML.)
Creating a Paging Class
This class, which I've named
dhtmlGetRows, contains two properties and one method. The two properties
RecsPerPage- determines how many records to display per page.
THString- this paged results are displayed via an HTML table; this property allows you to specify a string for the table headings.
The single method is
GenerateHTML(RecordsetObject), which returns the complete HTML
DIV tag) for the paging application.
This method expects a single parameter,
RecordsetObject, which should be a Recordset object
populated with the database data you wish to have displayed in a paged format.
You can download the class's source code or
view a live demo. Before signing off, I do want to take a quick look at
how to use the class through an ASP page. Since the class only contains a single method, using the class is
rather straightforward. All you need to do is create (and populate) a Recordset object; next, create an instance
of the class and output (
Response.Write) the value of
The above code snippet assumes that the
dhtmlGetRows class is available in a server-side include
dhtmlGetRows.class.asp. To learn more about server-side includes be sure to read:
The Low-Down on