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:
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.
Sorting a
TDC using scripting
|
