Inside Technique : Favorite Links
By Scott Isaacs

Most web-sites keep a list of favorite or useful links. Using the Data Binding feature of Internet Explorer 4.0, a list of links can be made more interactive and maintainable.

The table below demonstrates Data Binding. Click on a column header to automatically sort the list. With data binding, the data is cached and manipulated locally on the client, allowing a near instantaneous response.

With Internet Explorer 4.0, you would see a table with the bound data.

Description

This page is created as follows:

1. Embed the TDC (Tabular Data Control) on your page. This object is automatically installed with Internet Explorer 4.0. Change the value for "DataURL" to point to a text file on your server.

     <object id="linkList" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
       <param name="TextQualifier" value=""">
       <param name="FieldDelim" value="|">
       <param name="UseHeader" value="False">
       <param name="DataURL" value="favoriteLinks.txt">
     </object>

2. Create the template table in your HTML. This table is expanded on the client with the contents specified by the data source's DataURL property.

   The datasrc attribute on the table associates the table with the object defined above. Within the table template, the datafld attribute defines the column to display.

     <table border="0" cellpadding="0" width="100%" cols="6" datasrc="#linkList">
       <thead>
         <tr>
          <th width=100 title="Sort by Category" onclick="doSort('Column4')">Category</th>
          <th width=210 title="Sort by Title" onclick="doSort('Column2')">Name</th>
          <th width=* onclick="doSort('Column3')">Description</th>
         </tr>
       </thead>
       <tbody id="linkTable">
         <tr>
          <td valign="top" nowrap class="description"><span datafld="Column4"></span></td>
          <td valign="top" class="description"><a datafld="Column1">
            <span datafld="Column2" dataformatas="text"></span></a>
          </td>
          <td valign="top" nowrap class="description"><span datafld="Column3"></span></td>
         </tr>
       </tbody>
      </table>

3. Add code to sort the individual columns.

   Each cell in the header has a simple onclick handler defined. When a header cell is clicked, that column is sorted with the followng code:

   
    function doSort(col) {
      linkList.SortAscending = true
      linkList.SortColumn = col
      linkList.Reset()
    } 

4. Add a little style to your table

   The style sheet below is used to enhance the appearance of the table and can be easily customized.

    .category {font-weight: bold; font-family: arial}
    .description A {color: #FF0000; font-weight: bold} 
    TH {cursor: hand; color: #0033CC; text-align: left} 
    TD {margin-bottom: 5pt} 

5. Define the text file with your list of links.

   The text file contains 1 line for each record, and each field is delimited by a "|". The first column is the URL, the second is a title, the thirs field is a description, and the last field is a category for the link. Below is the text file used by this document.

    "http://www.insideDHTML.com"|"Inside Dynamic HTML"|"Comprehensive Web-Site on Dynamic HTML"|"Web Site"
    "http://www.insideDHTML.com/css/tutor.asp"|"CSS Online"|"Interactive tutorial on CSS"|"Tutorial"
    "http://www.insideDHTML.com/tips/tip.asp"|"Trade Secret"|"The best Dynamic HTML tips and techniques"|"Tutorial"
    "http://www.insideDHTML.com/links/links.asp"|"DHTML Links"|"Rate your favorite sites"|"Links"

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.