Categories:

Sorting a Tabular Data Control using scripting

You may have seen scripts that sort ordinary HTML tables that run tens, if not hundreds, of lines of code. Fortunately with a Tabular Data Control, the whole process is a lot simpler. You lose some, but then again you win some! Sorting a TDC dynamically is governed by the following property and method:

  • TDC.Sort: Read/writable property that contain the sort string (+-column_name).

  • TDC.reset(): Method that refreshes the displayed data according to the settings of a Sort or Filter request.

The key here is the Sort property, which controls how the TDC will be sorted. Pass into it the sort string "+grade", for example, and the TDC will be sorted by grade and ascending. We're ready at this point to expand our previous student grades example with dynamic sort functionality:

Student Grades 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="|">
</OBJECT>

<TABLE DATASRC="#studentgrades" BORDER="2">
<THEAD>
	<TH><a href="javascript:sortbyname()">Name</a></TH>
	<TH><a href="javascript:sortbygrade()">Final Grade</a></TH>
</THEAD>
<TR>
	<TD><SPAN DATAFLD="name"></SPAN></TD>
	<TD align="center"><SPAN DATAFLD="grade"></SPAN></TD>
</TR>
</TABLE>

<SCRIPT type="text/javascript">

var tdcobj=document.all.studentgrades
var sortnamestring="-name"
var sortgradestring="-grade"

function sortbyname(){
sortnamestring=(sortnamestring!="+name")? "+name" : "-name"
tdcobj.Sort=sortnamestring
tdcobj.reset()
}

function sortbygrade(){
sortgradestring=(sortgradestring!="+grade")? "+grade" : "-grade"
tdcobj.Sort=sortgradestring
tdcobj.reset()
}

</SCRIPT>

Output (screenshot for NS viewers sake):

Nothing special in the script above- we construct the relevant sort string and alternate it between "+" and "-", then simply feed it to the Sort property of our TDC.