Sorting a Tabular Data Control (IE)

Two of the most useful features in IE's Tabular Data Control is the ability to sort and filter the displayed data. This brings a  TDC truly on par with a simple server side database, but realized completely client side instead. In this tutorial, we look at sorting a TDC. If you're unfamiliar with even what TDC is, be sure to first read up on our guest tutorial "Introduction to TDC.

Sorting a Tabular Data Control using the <PARAM> tag

Lets say you're displaying a list of student names and their grades using Tabular Data Control. The ability to sort the displayed information either by name or grade, ascending or descending when displaying it would definitely be an appreciated feature. The most natural way is to sort this data automatically when the data is first displayed on the page, and this can be accomplished by using the following <PARAM> tag:

  • <PARAM name="Sort" value="+-column_name">

where "columname" is the name of the column you wish to sort the displayed information using, with a "+" indicating ascending, and "-" indicating descending. This applies to both alphabetical and numerical column types.

Lets see what I mean by creating a simple student grades TDC, and sort this information by grade before displaying it (descending): 


~George Chiang~|~83%~
~Bill Larson~|~69%~
~Jimmy Lin~|~94%~
~Mary Miller~|~59%~
~Jane Wood~|~89%~
~Terry Gray~|~72%~
~Andrew Dart~|~82%~
Corresponding HTML page:
<OBJECT ID="studentgrades" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<PARAM NAME="DataURL" VALUE="studentgrades.txt">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">
	<PARAM NAME="Sort" VALUE="-grade">


<TABLE DATASRC="#studentgrades" BORDER="2">
	<TH>Final Grade</TH>
	<TD><SPAN DATAFLD="name"></SPAN></TD>
	<TD align="center"><SPAN DATAFLD="grade"></SPAN></TD>

Example output:

Name Final Grade
Jimmy Lin 94%
Jane Wood 89%
George Chiang 83%
Andrew Dart 82%
Terry Gray 72%
Bill Larson 69%
Mary Miller 59%

Pretty cool- and simple- eh?

Now, everything looks fine and dandy, except it would be even finer if the displayed data can be sorted on demand as well, for example, by clicking on either "Name" or "Final Grade" above. This requires scripting, which is what we'll see next- sorting a TDC dynamically.

Sorting a TDC using scripting