When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
Print this page.
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!

- continued -

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
 Set objRS = Nothing
 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


  • Download the source to the dhtmlGetRows class
  • View the live demo!

  • ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article