Categories:

Introduction to Tabular Data Control (IE)

Credits: This tutorial is written by Premshree Pillai with changes and additions by JavaScriptKit.com. See footnote for more information on author.

Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and even sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple "database" function without the need for server side scripting such as PHP and mySQL. A client side language such as JavaScript handles the more sophisticated features of Tabular Data Control. In a nutshell, TDC renders a simple client side database!

As mentioned, the tabular data control is available in IE 4 and upwards. Netscape requires a plug-in for the same function to work.

Implementation:

The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique identifier) for the tabular data control is

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83

Thus we initialize this control in a web page as follows :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
...
...
...
</OBJECT>
Any object, like applet, has a number of parameters. Parameters of the object are specified using the <PARAM> tag. The tabular data control has around 8 parameters. Here, I'll discuss only the more important ones :
  • DataURL: The path of the file that contains the data. For eg "data.txt".
  • UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.
  • TextQualifier: Specifies the optional character that surrounds a field.
  • FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is  the text qualifier.
  • RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.
Thus, an example complete initialization will look as follows : 
<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="YourDataFile.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>
The parameter names are not case sensitive. The TextQualifier parameter is purely optional, though can be useful in helping you more easily distinguish between each data entry.

First, let us consider a simple example where I store my name and age in a text file data1.txt. Here is the file:

data1.txt: 

name|age
~Premshree Pillai~|~19~
Now, I will extract this data and display it in a web page as follows :

Corresponding HTML page: 

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

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>
The output will display : Premshree 19

Note the attributes within the SPAN tags. DATASRC specifies the data source to use, which is the same as the ID of the object we have initialized (here, 'data1'). The DATAFLD attribute specifies which field of the data we want to display. The data file data1.txt had two fields 'name' and 'age' as you can see. Specifying the DATAFLD as 'name' will display the name.

Now, the above example, while perfectly valid, reveals a potential shortcoming of the technique- as we add and remove data in the text file, we also need to then update the corresponding HTML on the page to accommodate this change (ie: add/remove <span> tags). This process quickly becomes cumbersome depending on the size of our database and how often it changes. Fortunately for these situations there is another way to display the data that is both dynamic and self-correcting.