Published: Wednesday, May 09, 2001
Paging Records on the Client
By Scott Mitchell
| Client-Side JavaScript Paging Code By... |
|---|
|
A hearty thanks goes out to Andrew Gibson; it was his client-side JavaScript
paging code posted in the ASPFreeForAll listserv
that this article and VBScript class is based on. Thanks, Andrew!
|
Introduction
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:
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.
In this article we will examine how to move this entire process to the client-side. When the user opts to
view our data, all thirty records are sent to the client in the form of a client-side JavaScript array.
Additional client-side JavaScript displays the first through tenth record and links to display the next (or
previous) set of records. When these links are clicked, client-side JavaScript code is executed, and the new
data is displayed. Since this all happens on the client-side, the only time the page needs to contact the
Web server is when the page is first loaded!
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 (<tr><td>
Database Value </td></tr>). This array will contain all of our database
elements we wish to allow the user to page through.
We'll also need a client-side JavaScript function to display a subset of these array values. Using this function
we can show the first N records; upon a user clicking a link we can show the next (or previous) N records.
This function, then, will allow for client-side paging.
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 DIV tag into which all of our output will be dumped. Then, using client-side JavaScript
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
Keep in mind that our entire application here will consist of just one ASP page. This ASP page, when visited, will
create all of the client-side JavaScript code needed to page through the records. To simplify this process,
I have created a VBScript class to handle this functionality. When using this class, a developer will only have
to pass in the Recordset whose data he wishes to have paged on the visitor's Web browser! (For more information
on using classes be sure to read: Using Classes within VBScript.)
This class, which I've named dhtmlGetRows, contains two properties and one method. The two properties
are:
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
(the client-side JavaScript code and the needed 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.
The code for the class is rather long and, mostly, contains code that simply returns client-side JavaScript code.
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 objClassInstance.GenerateHTML(objRS).
<!--#include file="dhtmlGetRows.class.asp"-->
<%
'Create and populate a Recordset
Dim objRS, objConn, strSQL
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "DSN=MyDSN"
strSQL = "SELECT TOP 25 ViewCount, Description " & _
"FROM tblFAQ ORDER BY ViewCount DESC"
Set objRS = objConn.Execute(strSQL)
'Create an instance of the dhtmlGetRows class
Dim objPagedResults
Set objPagedResults = new dhtmlGetRows
objPagedResults.THString = "<th>Views</th><th>FAQ Question</th>"
Response.Write objPagedResults.GenerateHTML(objRS)
'Clean up...
Set objPagedResults = Nothing
objRS.Close
Set objRS = Nothing
objConn.Close
Set objConn = Nothing
%>
|
The above code snippet assumes that the dhtmlGetRows class is available in a server-side include
file dhtmlGetRows.class.asp. To learn more about server-side includes be sure to read:
The Low-Down on #include.
Happy Programming!
By Scott Mitchell
Attachments:
Download the source to the dhtmlGetRows class
View the live demo!
