Work with Table Binding

Using table data binding, you can display multiple records in a recordset:

<table datasrc="#id">
   <tr>
      <td><span datafld="field1"></span></td>
      <td><span datafld="field2"></span></td>
   </tr>
</table>

Note that the <td> tag doesn't support data binding, so you must use a tag that does, such as the <span> tag. The browser will automatically add as many rows as it needs to display all the records in the recordset. It is often desirable, however, especially if your table gets quite large, to specify how many records display at once. This is called paging. You specify your paging in the <table> tag as follows:

dataPageSize="number"

To create a command that allows you to navigate through a table page, you must first assign a unique id to the table. Once you assign an id to the table, you can reference the table id using table methods and properties. The following methods and properties are applicable to table data navigation.

id.firstPage()
id.previousPage()
id.nextPage()
id.lastPage()
id.dataPageSize=n

Bind XML Data to a Table

Open FP2text.htm, view the source code and rename the file to FP2.htm. Edit the code as follows:

<table width="460" border="1" datasrc="#Staff_Info" dataPageSize="3" id="StaffTable">

<img datafld="Photo">
<span class="celltext" datafld="Name"></span>

<span class="celltext" datafld="Department"></span>

<span class="celltext" datafld="Position"></span>

<span class="celltext" datafld="Phone"></span>

<span class="celltext" datafld="Years"></span>

<span class="celltext" datafld="Status"></span>

Add the table methods:

<button onClick="StaffTable.firstPage()">|&lt; First</button>
&nbsp;
<button onClick="StaffTable.previousPage()">&lt; Previous Page </button>
&nbsp;
<button onClick="StaffTable.nextPage()">Next Page &gt;</button>
&nbsp;
<button onClick="StaffTable.lastPage()">Last &gt;|</button>

Save and refresh the file. Test the navigation.

You'll often find it's more meaningful to display records in a hierarchical fashion, such as by department or category, rather than alphabetical or numerical. You can do this by nesting tables in a similar way the fields in the XML data are nested:

<table datasrc="#id" datafld="record">
   <tr>
      <td><span datafld="field1"></span></td>
      <td><span datafld="field2"></span></td>
   </tr>
</table>

OR for greater nesting

<table datasrc="#id" datafld="record1">
   <tr>
      <td>
         <table datasrc="#id" datafld="record2">
            <tr>
               <td><span datafld="field1"></span></td>
               <td><span datafld="field2"></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Bind Hierarchical XML Data to Nested Tables

Open Emp2.xml and examine its hierarchical structure.

Open FP3text.htm, view the source and save the file as FP3.htm. Edit FP3.htm as follows:

Add the data island:
<xml id="Staff_Info" src="Emp2.xml"></xml>

Edit the Department Name <span> tag:
datasrc="#Staff_Info" datafld="Dept_Name"

Edit the <table> tag:
datasrc="#Staff_Info" datafld="Employee"

Edit the <img> and applicable <span> tags:
datafld="Photo"
datafld="Name"
datafld="Position"
datafld="Phone"
datafld="Years"
datafld="Status"

Add the onClick event handler using the appropriate method to the navigational button:
onClick="Staff_Info.recordset.moveNext(); if (Staff_Info.recordset.EOF) Staff_Info.recordset.moveFirst()"

Save and refresh the file. Test the navigation.