Categories:

Example- A multi-page Tabular Data Control

To conclude this tutorial, let's create a "multi-page" TDC that displays 5 rows at a time, and lets the user cycle through the entire record via links. To start things off, here's a bloated version of our original student grades data file with a few more students and a dedicated row to number each one. If you're wondering why I added a leading "0" to the single digits numbers, more on that soon.

studentgrades.txt: 

studentid|name|grade
~01~|~George Chiang~|~83%~
~02~|~Bill Larson~|~69%~
~03~|~Jimmy Lin~|~94%~
~04~|~Mary Miller~|~59%~
~05~|~Jane Wood~|~89%~
~06~|~Terry Gray~|~72%~
~07~|~Andrew Dart~|~82%~
~08~|~Mark Andrew~|~41%~
~09~|~Jason Beck~|~69%~
~10~|~Richard Lee~|~63%~
~11~|~Edward Lee~|~52%~
~12~|~Ben Han~|~84%~
~13~|~Kate Bert~|~73%~
~14~|~Henry Chui~|~81%~

To the HTML page now that will take this data, display the first 5 students initially, and lets the user view the remaining records on demand:

Student Grades HTML page: 

<OBJECT ID="studentgrades" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<PARAM NAME="DataURL" VALUE="studentgrades2.txt">
	<PARAM NAME="UseHeader" VALUE="TRUE">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<TABLE ID="studentrecords" DATASRC="#studentgrades" BORDER="2" style="visibility:hidden">
<THEAD>
	<TH>Student ID</TH>
	<TH>Name</TH>
	<TH>Final Grade</TH>
</THEAD>
<TR>
	<TD><SPAN DATAFLD="studentid"></SPAN></TD>
	<TD><SPAN DATAFLD="name"></SPAN></TD>
	<TD align="center"><SPAN DATAFLD="grade"></SPAN></TD>
</TR>
</TABLE>

<DIV ID="cyclelinks"></DIV>

<SCRIPT type="text/javascript">

var showrecords=5 //number of student records to show at once
var tdcobj=document.all.studentgrades

function gettotalrecords(){
tdcobj.recordset.moveLast() //move to end of data file
totalrecords=tdcobj.recordset.absolutePosition //get total # of records
}

function revealrecords(startingpoint){
var lowerbound=(startingpoint-1)*showrecords+1
var upperbound=lowerbound+showrecords-1
if (lowerbound<10) lowerbound="0"+lowerbound
if (upperbound<10) upperbound="0"+upperbound
var filterstring="(studentid >= "+lowerbound+") & (studentid <= "+upperbound+")"
tdcobj.Filter=filterstring
tdcobj.reset()
}

function createcyclelinks(){
var linkstocreate=Math.ceil(totalrecords/showrecords)
var linkshtml=""
for (i=1;i<=linkstocreate;i++)
linkshtml+='<a href="javascript:revealrecords('+i+')">'+i+'</a> - '
document.all.cyclelinks.innerHTML='<b>'+linkshtml+'</b>'
}

function init(){
gettotalrecords()
createcyclelinks()
revealrecords(1) //show first batch of records when page loads (1 to 5)
document.all.studentrecords.style.visibility="visible"
}

window.onload=init
</SCRIPT>

Output (screen shot for NS viewers sake):

A lot of the above is just getting the Math right, though a few points note mentioning:

  • I set the visibility property of the <table> tag to hidden initially , so the entire record is downloaded but not visible to the user. The entire record needs to be downloaded in order for function gettotalrecords() to accurately retrieve the total number of rows in the data file.
  •  I purposely used a leading "0" to pad single digit student numbers in the data file. This is to overcome an apparent bug (at least in IE6) that causes comparison of numbers to be treated as comparison of strings instead. So a comparison like (studentnumber<5) would in fact match not only 1 to 4, but 10-49, since these double digit numbers begin with a number that's less than 5 as well. By padding our single digit numbers so all numbers are 2 digits, this negates the bug.
  •  function revealrecords() is mainly Math, and calculates  the range of records to show (ie: 1-5, 6-10, 10 and onwards) before constructing a filter string using it.

The above example automatically adopts to any number of records, generating the appropriate links to cycle through them.