TDC
Tabular Data Control (TDC) is an Active X Object that you add
to a page with the <OBJECT> tag. With TDC, you can use
data from external files in your html pages. Example:
HTML Page
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Intro to Data
Binding</title>
<!-- This object element inserts an ActiveX control -->
<!-- for handling and parsing our data. The PARAM -->
<!-- tags give the control starting parameters -->
<!-- such as URL. classid lists the ID for the TDC control. -->
<object id = "Colors"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" /> /*placed on both ends of text*/
<param name = "FieldDelim" value = "|" /> /*separates data fields*/
</object>
<script type = "text/javascript">
<!--
/*EOF = End of File BOF = Beginning of File*/
var recordSet = Colors.recordset;
function reNumber()
{
if ( !recordSet.EOF )
recordNumber.innerText =
recordSet.absolutePosition;
else
recordNumber.innerText = " ";
}
function forward()
{
recordSet.MoveNext();
if ( recordSet.EOF )
recordSet.MoveFirst();
colorSample.style.backgroundColor =
colorRGB.innerText;
reNumber();
}
// -->
</script>
</head>
<body onload = "reNumber()" onclick = "forward()">
<h1>XHTML Color Table</h1>
<h3>Click to move forward in the recordset.</h3>
<p><strong>Color Name: </strong>
<span id = "colorId" style = "font-family: monospace"
datasrc = "#Colors" datafld = "ColorName"></span><br />
<strong>Color RGB Value: </strong>
<span id = "colorRGB" style = "font-family: monospace"
datasrc = "#Colors" datafld = "ColorHexRGBValue">
</span><br />
Currently viewing record number
<span id = "recordNumber" style = "font-weight: 900">
</span><br />
<span id = "colorSample" style = "background-color: aqua;
color: 888888; font-size: 30pt">Color Sample
</span></p>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Text Page Loaded into HTML
Document (HTMLStandardColors.txt)
@ColorName@|@ColorHexRGBValue@
@aqua@|@#00FFFF@
@black@|@#000000@
@blue@|@#0000FF@
@fuchsia@|@#FF00FF@
@gray@|@#808080@
@green@|@#008000@
@lime@|@#00FF00@
@maroon@|@#800000@
@navy@|@#000080@
@olive@|@#808000@
@purple@|@#800080@
@red@|@#FF0000@
@silver@|@#C0C0C0@
@teal@|@#008080@
@yellow@|@#FFFF00@
@white@|@#FFFFFF@
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Second HTML Sort Using TDC and Same Text File Above
<html>
<head>
<title>Dynamic Recordset
Viewing</title>
<object id =
"Colors"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL"
value =
"HTMLStandardColors.txt" />
<param name = "UseHeader"
value = "TRUE" />
<param name = "TextQualifier"
value = "@" />
<param name = "FieldDelim"
value = "|" />
</object>
<script type = "text/javascript">
<!--
var recordSet = Colors.recordset;
function update()
{
h1Title.style.color = colorRGB.innerText;
}
function move( whereTo )
{
switch ( whereTo ) {
case "first":
recordSet.MoveFirst();
update();
break;
// If recordset is at beginning, move to end.
case "previous":
recordSet.MovePrevious();
if ( recordSet.BOF )
recordSet.MoveLast();
// If recordset is at end, move to beginning.
case "next":
if ( recordSet.EOF )
recordSet.MoveFirst();
case "last":
recordSet.MoveLast();
update();
break;
}
}
// -->
</script>
<style type = "text/css">
input { background-color: khaki;
color: green;
font-weight: bold }
</style>
</head>
<body style = "background-color: darkkhaki">
<h1 style = "color: black" id = "h1Title">
XHTML Color Table</h1>
<span style = "position: absolute; left: 200; width: 270;
border-style: groove; text-align: center;
background-color: cornsilk; padding: 10">
<strong>Color Name: </strong>
<span id = "colorName" style = "font-family: monospace"
datasrc = "#Colors" datafld = "ColorName">ABC</span>
<br />
<strong>Color RGB Value: </strong>
<span id = "colorRGB" style = "font-family: monospace"
datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC
</span><br />
<input type = "button" value = "First"
onclick = "move( 'first' );" />
<input type = "button" value = "Previous"
onclick = "move( 'previous' );" />
<input type = "button" value = "Next"
onclick = "move( 'next' );" />
<input type = "button" value = "Last"
onclick = "move( 'last' );" />
</span>
</body>
</html>
------------------------------------------------------------------------------------------------------------
Using
TDC with Tables and Same Text File
<html>
<head>
<title>Data Binding and
Tables</title>
<object id =
"Colors"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL"
value =
"HTMLStandardColors.txt" />
<param name = "UseHeader"
value = "TRUE" />
<param name = "TextQualifier"
value = "@" />
<param name = "FieldDelim"
value = "|" />
</object>
</head>
<body style = "background-color: darkseagreen">
<h1>Binding Data to a <code>table</code></h1>
<table datasrc = "#Colors" style = "border-style: ridge;
border-color: darkseagreen;
background-color: lightcyan">
<thead>
<tr style = "background-color: mediumslateblue">
<th>Color Name</th>
<th>Color RGB Value</th>
</tr>
</thead>
<tbody>
<tr style = "background-color: lightsteelblue">
<td><span datafld = "ColorName"></span></td>
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
</tr>
</tbody>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
Sorting Table Data Ascending Alphabetically
<html>
<head>
<title>Data Binding and Tables</title>
<object id = "Colors"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" />
<param name = "FieldDelim" value = "|" />
</object>
</head>
<body style = "background-color: darkseagreen">
<table datasrc = "#Colors" style = "border-style: ridge;
border-color: darkseagreen;
background-color: lightcyan">
<caption>
Sort by:
<select onchange = "Colors.Sort = this.value;
Colors.Reset();">
<option value = "ColorName">Color Name (Ascending)
</option>
<option value = "-ColorName">Color Name (Descending)
</option>
<option value = "ColorHexRGBValue">Color RGB Value
(Ascending)</option>
<option value = "-ColorHexRGBValue">Color RGB Value
(Descending)</option>
</select>
</caption>
<thead>
<tr style = "background-color: mediumslateblue">
<th>Color Name</th>
<th>Color RGB Value</th>
</tr>
</thead>
<tbody>
<tr style = "background-color: lightsteelblue">
<td><span datafld = "ColorName"></span></td>
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
</tr>
</tbody>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
Advanced Sorting
<html>
<head>
<title>Data Binding - Sorting and Filtering</title>
<object id = "Publications"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value = "DBPublications.txt" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" />
<param name = "FieldDelim" value = "|" />
<param name = "Sort" value = "+Title" />
</object>
<style type = "text/css">
a { font-size: 9pt;
text-decoration: underline;
cursor: hand;
color: blue }
caption { cursor: hand; }
<script type = "text/javascript">
<!--
var sortOrder;
function reSort( column, order )
{
if ( order )
sortOrder = "";
else
sortOrder = "-";
if ( event.ctrlKey ) {
Publications.Sort += "; " + sortOrder + column;
Publications.Reset();
}
else {
Publications.Sort = sortOrder + column;
Publications.Reset();
}
spanSort.innerText = "Current sort: " +
Publications.Sort;
}
function filter( filterText, filterColumn )
{
Publications.Filter = filterColumn + "=" +
filterText;
Publications.Reset();
spanFilter.innerText =
"Current filter: " + Publications.Filter;
}
function clearAll()
{
Publications.Sort = " ";
spanSort.innerText = "Current sort: None";
Publications.Filter = " ";
spanFilter.innerText = "Current filter: None";
Publications.Reset();
}
// -->
</script>
</head>
<body>
<h1>Advanced Sorting</h1>
<p>Click the link next to a column head to sort by that
column. To sort by more than one column at a time, hold
down Ctrl while you click another sorting link. Click
any cell to filter by the data of that cell. To clear
filters and sorts, click the green caption bar.</p>
<table datasrc = "#Publications" border = "1"
cellspacing = "0" cellpadding = "2" style =
"background-color: papayawhip;">
<caption style = "background-color: lightgreen;
padding: 5" onclick = "clearAll()">
<span id = "spanFilter" style = "font-weight: bold;
background-color: lavender">Current filter: None
</span>
<span id = "spanSort" style = "font-weight: bold;
background-color: khaki">Current sort: None</span>
</caption>
<thead>
<tr>
<th>Title <br />
(<a onclick = "reSort( 'Title', true )">
Ascending</a>
<a onclick = "reSort( 'Title', false )">
Descending</a>)
</th>
<th>Authors <br />
(<a onclick = "reSort( 'Authors', true )">
Ascending</a>
<a onclick = "reSort( 'Authors', false )">
Descending</a>)
</th>
<th>Copyright <br />
(<a onclick = "reSort( 'Copyright', true )">
Ascending</a>
<a onclick = "reSort( 'Copyright', false )">
Descending</a>)
</th>
<th>Edition <br />
(<a onclick = "reSort( 'Edition', true )">
Ascending</a>
<a onclick = "reSort( 'Edition', false )">
Descending</a>)
</th>
<th>Type <br />
(<a onclick = "reSort( 'Type', true )">
Ascending</a>
<a onclick = "reSort( 'Type', false )">
Descending</a>)
</th>
</tr>
</thead>
<tr>
<td><span datafld = "Title" onclick =
"filter( this.innerText, 'Title' )"></span>
</td>
<td><span datafld = "Authors" onclick =
"filter( this.innerText, 'Authors')"></span>
</td>
<td><span datafld = "Copyright" onclick =
"filter( this.innerText, 'Copyright' )"></span>
</td>
<td><span datafld = "Edition" onclick =
"filter( this.innerText, 'Edition' )"></span>
</td>
<td><span datafld = "Type" onclick =
"filter( this.innerText, 'Type' )"></span>
</td>
---------------------------------------------------------------------------------------------------------
Text Used for Advance Sorting:
@Title@|@Authors@|@Copyright@|@Edition@|@Type@
@C++@|@Darth Vader@|@1994@|@2@|@BK@
@C++@|@Darth Vader@|@2001@|@3@|@BK@
@C++@|@Darth Vader@|@1998@|@2@|@BK@
@C++@|@Darth Vader@|@2001@|@3@|@BK@
@Super Cool Fun With Java@|@Darth Vader@|@1998@|@2@|@BK@
@Super Cool Fun With Java@|@Darth Vader@|@2000@|@3@|@BK@
@Super Cool Fun With Java@|@Darth Vader@|@2002@|@4@|@BK@
@Visual Basic@|@Darth Vader,Nieto@|@1999@|@1@|@BK@
@Website Design@|@Darth Vader@|@2000@|@1@|@BK@
@Website Design@|@Darth Vader@|@2002@|@2@|@BK@
@Demented Code in C++@|@Darth Vader@|@1998@|@2@|@BKMMCD@
@Demented Code in C++@|@Darth Vader@|@2000@|@3@|@BKMMCD@
@Demented Code in C++@|@Darth Vader@|@1998@|@2@|@BKMMCD@
@Java and a Good Cup of Coffee@|@Darth Vader@|@2000@|@3@|@BKMMCD@
@Java and a Good Cup of Coffee@|@Darth Vader@|@2002@|@4@|@BKMMCD@
@VB is For Me@|@Darth Vader,Nieto@|@1999@|@1@|@BKMMCD@
@Internet Mayhem@|@Darth Vader@|@2000@|@1@|@BKMMCD@
@Internet Mayhem@|@Darth Vader@|@2002@|@2@|@BKMMCD@
---------------------------------------------------------------------------------------------------------
TDC and Binding Images
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML File
<html>
<head>
<title>Data Binding and
Tables</title>
<object id =
"Colors"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL"
value =
"HTMLStandardColors.txt" />
<param name = "UseHeader"
value = "TRUE" />
<param name = "TextQualifier"
value = "@" />
<param name = "FieldDelim"
value = "|" />
</object>
</head>
<body style = "background-color: darkseagreen">
<h1>Binding Data to a <code>table</code></h1>
<table datasrc = "#Colors" style = "border-style: ridge;
border-color: darkseagreen;
background-color: lightcyan">
<thead>
<tr style = "background-color: mediumslateblue">
<th>Color Name</th>
<th>Color RGB Value</th>
</tr>
</thead>
<tbody>
<tr style = "background-color: lightsteelblue">
<td><span datafld = "ColorName"></span></td>
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
</tr>
</tbody>
</body>
</html>
--------------------------------------------------------------------------------------------------------
Text File
image
numbers/0.gif
numbers/1.gif
numbers/2.gif
numbers/3.gif
numbers/4.gif
numbers/5.gif
numbers/6.gif
numbers/7.gif
numbers/8.gif
numbers/9.gif
Contact
