n my last article, I explained how to use the XML Data Source Object to extract content from an external XML file or XML data embedded in the HTML file into a HTML page.
In this article, I will be using a similar process to demonstrate how to use the Tabular Data Control. This is an ActiveX control that’s built into Internet Explorer (versions 4 and upwards), which allows you to extract ordered (delimited) contents from an ASCII file into HTML elements.
Suppose you have a text file that contains three fields (which can be compared to tables in a database). If the fields are delimited by a specific character, (such as a comma or tab character), you can identify the values and extract them for use elsewhere, such as in an HTML page.
This functionality is especially useful if you have relatively small amounts of data that need to be updated frequently and require client-side scripting. Basically, it acts like a small database.
The only disadvantage of this control is that it works with MSIE only.
In this article, I’ll take you through four examples, each of increasing difficulty, that will show how to use the Tabular Data Control.
Getting Started
Initialize the tabular data control in a Web page using the
Any object has a number of parameters. An object’s parameters are specified using the tag. The tabular data control has around 7 parameters. Here are the more important ones:
- DataURL: Shows the path of the file that contains the data. For example, “data.txt”.
- UseHeader: Normally, this parameter is always set to true, which means you should use the field name for referencing a particular field. In some applications, the field name (header) may not be required. In that case, the default value is false.
- TextQualifier: This is that character at the beginning and end of a text that qualifies that text. For example, “~My name is Premshree~.” Here the TextQualifier is “~”.
- FieldDelim: The Field Delimiter distinguished between the different data fields of the data file. Consider a data file with the fields name, age, and sex. The values for these fields will be written as “*SomeName*|*SomeAge*|*SomeSex*.” Here, “|” is the field delimiter and “*” is the text qualifier.
Complete initialization will look like this:
The parameter names are not case sensitive.
The
In the following examples, I’m using the text qualifier “~”, the field delimiter “|”, and the text extension the “.txt.” You can use any text extension you want.
Extract and Display Data
The first example is fairly simple. My name and age are stored in the text file “data1.txt.” Listing 1 shows how to display my name and age using the tag.
The output will display:
Premshree 19 In Listing 1, note the attributes within the SPAN tags. DATASRC specifies the data source to use?the same as the ID of the object initialized, in this case, “data1.” The DATAFLD attribute specifies which field is to be displayed. Since the “data1.txt” file has two fields (“name” and “age”), specifying the DATAFLD as “name” will display the name.
You can use this same method to extract data from a text file into any HTML element. However, there is a flaw. If your data file contains more than one entry, you wont be able to extract all the values directly.
In these cases, use the TABLE tag.
The next example will illustrate how you can use the TABLE tag to solve this problem.
Display in a Tabular Form
Listing 2 demonstrates how to extract this data and display it on the Web page in a tabular form. The text file in this example stores the name, age, and sex of three people:
name|age|sex~Premshree Pillai~|~19~|~male~~Vinod~|~18~|~male~~Usha~|~19~|~female~The code in Listing 2 contains three data fields (DATAFLD) in three different tags (columns) only once. The Web page automatically displays all three sets of values (three rows). You can add as much content as you want to the text file without making any modifications to the HTML code that extracts these values.
The output looks like this:
| Name : | Age : | Sex : |
|---|---|---|
| Premshree Pillai | 19 | male |
| Vinod | 18 | male |
| Usha | 19 | female |
Add a Little JavaScript
In the first example, the element displayed the first entry of the data file. When you add another entry to the file, the data file (data1.txt) looks like this:
name|age~Premshree Pillai~|~19~~Vinod~|~18~You can use JavaScript to see the second entry (i.e. Vinod 18). The following code shows how:
The output will be:
Vinod 18 Initially, the entire data is stored in a variable dataset using the recordset method. The moveNext() method points to the next data item (next row). Other methods that can be used are:
- moveFirst(): Points to the first data item (first row).
- moveLast(): Points to the last data item (last row).
- EOF: Checks to see if you have reached the end of the file.
It might be beneficial to see this control in a more dynamic example. Listing 3 is of a JavaScript Ticker that ticks a number of messages. Each message points to a particular URL. The ticker reads its messages and the corresponding URL from a text file (tickerData.txt).
Though this functionality is only availble in MSIE, it is extemely versatile?especially when you’ve got small amounts of character-delimited data that you want to extract and display using client-side scripting.
