How To Use the DATAPAGESIZE DHTML Attribute to Control Data Display in Databound HTML Table (260881)

SUMMARY

You can use Internet Explorer 5 Dynamic HTML (DHTML) extensions in client-side script to control the display (number and navigation) of records in a databound HTML table. You can use the DATAPAGESIZE attribute of the HTML <TABLE> tag to specify the number of records that you want to display in the table when the page is viewed in the browser. Occasionally, the number of records that the datasource returns and to which the table element is bound may exceed the value that is specified for the DATAPAGESIZE attribute. In this situation, you can use the firstPage, nextPage, previousPage, and lastPage methods of an HTML table element in client-side script to implement a page based on navigation and display of records in the table.

MORE INFORMATION

Step-by-Step Example

The following steps demonstrate how to use client-side script to create an HTML page that controls the navigation and display of records in a databound HTML table element. In this sample, the HTML table is bound to a Remote Data Service (RDS) data control whose SQL property has been set to retrieve all the records from the Authors table in the PUBS Microsoft SQL Server 7.0 sample database. Data binding is set up to display the au_id, au_fname, and the au_lname columns in the HTML table.

In any HTML editor, open a new HTML file.

Cut and paste the following code in the HTML editor, and specify values that are specific to your environment for the Server and Connect parameters of the RDS data control:

<html>
<body>

<!-- The following OBJECT tag inserts an RDS data control on the HTML page -->
<object id="dsoAuthors" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33" 
width="0" height="0">
<param name="Server" value="http://<your web server>">
<param name="Connect" value="<OLEDB connection string for your SQL Server PUBS database>">
<param name="SQL" value="Select * from Authors">
</object>


<!-- The DATAPAGESIZE parameter in the TABLE tag below has been set to 5. -->
<!-- The table element should be assigned an ID attribute to use its DHTML extensions. -->
<!-- in client-side script -->
<!-- The datasrc parameter of the TABLE tag is set to #dsoAuthors -->
<!-- to bind the table to the RDS data control. -->
<table id="tblAuthors" datasrc=#dsoAuthors border=1 DATAPAGESIZE=5>
<thead>
 <tr>
	<th>Author Id</th>
	<th>First Name</th>
	<th>Last Name</th>
 </tr>
</thead>

<tr>
  <td><DIV datafld="au_id"></DIV></td>
  <td><DIV datafld="au_fname"></DIV></td>
  <td><DIV datafld="au_lname"></DIV></td>
</tr>
</table>

<br>

<!-- The following Button tags implement the Navigation buttons to scroll -->
<!-- through the records. -->
<Button id="cmdFirst" onClick="tblAuthors.firstPage()"><<</Button>
<Button id="cmdPrevious" onClick="tblAuthors.previousPage()"><</Button>
<Button id="cmdNext" onClick="tblAuthors.nextPage()">></Button>
<Button id="cmdLast" onClick="tblAuthors.lastPage()">>></Button>


</body>
</html>

Save the file as "tabAuthors.htm" in a virtual folder on your Web server. Client-side script in the onClick() event procedures of the <BUTTON> tags invoke the firstPage, previousPage, nextPage, and lastPage methods of the HTML table element to implement a page that is based on navigation and display of records.
In Internet Explorer 5, open the page. When the page is loaded, notice that the HTML table displays the first five records in the Authors table.
Use the navigation buttons beneath the table to scroll through the records. The DATAPAGESIZE setting ensures that only five records are displayed at a time in the HTML table.