Categories:


Tabular Data Control and JavaScript

The tabular data control exposes a few properties and methods for any client-side language like JavaScript to manipulate. Some of the important ones are:

  • recordset : This property creates a reference point to the data file.
  • EOF : This property is used to check if we have reached the end of the file.
  • moveFirst() : Point to the first data item (first row).
  • moveNext() : Point to the next data item from previous position.
  • moveLast() : Point to the last data item (last row).
  • ondatasetcomplete : Event handler that fires when the control and its data has loaded.

In the below example, we'll use JavaScript to reference a TDC's data file, and display its 2nd row:

Data3.txt:

name|age
~Premshree Pillai~|~19~
~Bill Gates~|~18~

Corresponding HTML page:

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

<SCRIPT LANGUAGE="JavaScript">
var dataSet=data3.recordset; //Get the complete data record set
dataSet.moveNext(); //Go to next data row
</SCRIPT>

<SPAN DATASRC="#data3" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data3" DATAFLD="age"></SPAN>
The output will be : Bill Gates 18

TDC JavaScript Ticker

By combining Tabular Data Control with JavaScript, the below example creates a ticker that retrieves its content from a txt file, and rotates/displays them:

tickerdata.txt: 

message#messageURL
JavaScriptKit.com tutorials and scripts#http://www.javascriptkit.com
Freewarejava.com Java applets#http://www.freewarejava.com
CodingForums.com help forum#http://www.codingforums.com
Premshree's Site#http://premshree.resource-locator.com
Corresponding HTML page: 
<script type="text/javascript">

//Note- Below example by JavaScriptKit.com
	
function tdcticker(){
	tickerSet.MoveNext();
	if (tickerSet.EOF) //if end of data's file
		tickerSet.MoveFirst()
	setTimeout("tdcticker()",3000); 
}

function init(){
	tickerSet=ticker.recordset
	tickerSet.moveFirst()
	setTimeout("tdcticker()",3000)
}

</script>

<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<param name="DataURL" value="tickerdata.txt">
	<param name="UseHeader" value="TRUE">
	<param name="FieldDelim" value="#">
</object>

<a href="" datasrc="#ticker" datafld="messageURL"
style="width:260px; border:1px solid black; background-color:">
	<span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</a>

<script type="text/javascript">
if (document.all)
	ticker.ondatasetcomplete=init
</script>

As you can see, Tabular Data Control is a great way to include simple database functionality on your site where a server-side db is not possible.

This tutorial is written by Premshree Pillai. Modified by JavaScriptKit.com for structure and content. Premshree is a freelance writer, writing on topics ranging from HTML, CSS, JavaScript to Perl, XML.