Developer

Client-side sortable data grids can reduce server traffic

With some basic HTML and JavaScript, you can build sortable, client-side grids. The result? Increased flexibility of Design Time Control in ASP.


When you're using Visual Interdev to build applications, you can use a client-side JavaScript and HTML trick to increase the flexibility of the ASP Design Time Control (DTC) grid. The key is to create a sortable data grid so that the application doesn’t have to make a call to the server to build or rebuild the table.

Grid basics
A data grid is simply a DTC that ASP uses to dynamically build HTML tables. Like HTML tables, they consist of container tags. The only significant client-side difference is that data grids are really two tables, an outer table and an inner table. The real differences are on the server-side. There, the columns of a DTC data grid can be bound to a database’s recordset object. This recordset is used to build the grid rows upon the client’s request. This gives DTC data grids tremendous flexibility.

Another key element is the span tag, which is a container tag that can be used as a wrapper for other HTML elements. It enables you to apply style sheet rules to any content contained within the <span id=’xyzzy’> and </span> tags. More important, span tags provide access to outerHTML and innerHTML of the DTC data grid, which allows you to modify the content contained within each table.

JavaScript fundamentals
JavaScript (a.k.a, ECMAScript or Jscript) is the language of choice for client-side scripting, mainly because more browsers support JavaScript than any other scripting language. JavaScript can handle document events, like onLoad and onUnload. One of the ways to provide these event handlers is to change the page’s body tag. Coding:
<body onload=”JavaScript:plugh()” onunload=”JavaScript:plover()”>

causes the function plugh() to be invoked when the document is loaded and it causes the function plover() to be invoked when the document is unloaded.

The technique
Let’s start with the sortableTable class, which defines a data grid or HTML table as sortable. You create an instance of this class like this:
‘var objTBL = new sortableTable(‘myTable’);‘.

The class sortableTable has two methods: column and update. The column method defines a column as sortable and defines the type of data in it. Columns are defined as sortable by passing the column header text string to the method as the first parameter. The second parameter, which is also a string, defines a column’s data type. The valid data types for columns are string, number, currency, and date. To prevent typos, I defined the variables stString, stNumber, stCurrency, and stDate for use as parameters. The update method sets the selected columns as sortable and performs some preprocessing to speed up the sort.

I also created the sortColumn function. Because of the nature of the information being sorted by this function, I couldn't use JavaScript’s built-in sort function. Instead, I chose the Quick Sort algorithm, invented in 1960 by C. A. R. Hoare. It's easy to understand and relatively fast. The sortColumn function is really only for use by instances of the sortableTable class. Any other use is not recommended and is at your own risk.

How to create a sortable table
Now that the groundwork has been laid, let's get started. First, include the JavaScript library with the HTML tags of your page. This will provide access to the sortableTable class, the sortColumn function, and the predefined variables. The next step is to encapsulate your data grid or table in span tags with a unique ID. Finally, add an onLoad event handler with code to define a table as sortable, and you should see something like Figure A.

Figure A
The defined table


The file library.js containsthe JavaScript necessary to create sortable data grids. You can download the JavaScript library here. The JavaScript, library.js, takes apart the HTML table contained between the <span id=”myTable”> and </span> tags and builds arrays based upon the rows and columns. In addition, the column headers are modified to be HTML anchor tags that invoke the sortColumn function to sort based upon that particular column.

Conclusion
Throughout the development of this utility, my goal was to avoid having to requery the server to sort the data grid by a different column. While the concept began as a way to reduce server traffic, it also serves to illustrate that there is more to client-side scripting than rollovers and pop-ups.

Want to share a Web design trick?
Send us an e-mail or post a comment below.

 

Editor's Picks

Free Newsletters, In your Inbox