Table Binding

• Using table data binding, each record can be displayed in a different row of a table. The syntax is:

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

Table Binding

• In the example, id is the name of the data island, field1, field2 are the fields from the recordset.

Page Binding

• As you add more records to your XML document, a table can become long and unwieldy. One way to fix this is to give the user the option of limiting the number of records displayed at any one time.

• The user can then move forward of backward that number of records at a time. This is called paging.

Page Binding

• To specify the page size, add the dataPageSize attribute to the <table> tag:

dataPageSize=“number”

• number is the number of records you want displayed in a single page.

Navigating a Table Page

• A unique identifier must be assigned to a table using the ID attribute before writing a command to navigate a table page. The syntax to do this is:

<table id=“id”>

• Here, id is the name you assign to the table object.• This is needed because the commands to navigate

the table pages act on the table itself not the recordset.

Table Methods and Properties

These figures show some table methods and properties

Table Methods and Properties

• To run these commands, add the command to the onClick event handler of a <button> tag. For example, to move to the last page in a data table named “StaffTable”, you enter the attribute:

onClick=“StaffTable.lastPage( )”

Hierarchical Records

This figure shows the layout of the EMP2.XML document

Hierarchical Records

• To bind the Employee fields in the previous slide to a table, you create a table as follows:

<table datasrc=“#Staff_Info” datafld=“Employee”> <tr> <td><span datafld=“Name”></span></td> <td><span datafld=“Position”></span></td> <td><span datafld=“Phone”></span></td> … </tr> </table>

Draft of the Final Web Page

This figure shows the draft of the final Web page

employee information grouped by department

The Final Web Page

This figure shows the final Web page