Sorting a Tabular Data Control

Home

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):

studentgrades.txt:

name|grade
~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="UseHeader" VALUE="TRUE">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">
	<PARAM NAME="Sort" VALUE="-grade">

</OBJECT>

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

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.

Tutorial introduction (Sorting a TDC using the <PARAM> tag)
Sorting a TDC using scripting

Sorting a TDC using scripting