[Home]  [Edit this page]  [Recent Changes]  [Special Pages]  [Help] 

---

How_To_XML_Page_XML_In_HTML_Table_DataIslands

---

How to page XML elements in HTML table using Data Islands?

When you bind XML data to a table, it will display all records at once on the page. The datapagesize attribute of the <table> tag controls the number of records displayed on a single page. The attribute value must be of integer type.

<xml id="books">
<?xml version="1.0"?>
<books>
   <book>
	<title>OpenGL Programming Guide Fourth Edition</title>
	<location>107</location>
	<publisher>Addison-Wesley</publisher>
	<year>2004</year>
  </book>
   <book>
	<title>Curves and Surfaces for CAGD: A Practical Guide</title>
	<location>116</location>
	<publisher>Academic Press</publisher>
	<year>2002</year>
   </book>
   <book>
	<title>An Introduction to NURBS: With Historical Perspective</title>
	<location>120</location>
	<publisher>Academic Press</publisher>
	<year>2001</year>
   </book>
   <book>
	<title>NURBS: From Projective Geometry to Practical Use</title>
	<location>126</location>
	<publisher>A K Peters</publisher>
	<year>1999</year>
   </book>
</books>
</xml>

In the example the HTML page will only display the first two records on one page.

<table width="100%" cellpadding="0" cellspacing="2" border="1" datasrc="#books" datapagesize="2">
 <thead>
   <tr>
	<th>Title</th>
	<th>Location</th>
	<th>Publisher</th>
	<th>Year</th>
   </tr>
 </thead>
 <tbody>
   <tr>
    	<td><span datafld="title"></span></td>
	<td><span datafld="location"></span></td>
    	<td><span datafld="publisher"></span></td>
	<td><span datafld="year"></span></td>
   </tr>
 </tbody>
</table>

To navigate through the rest of the records, first give an id attribute to the table.

<table width="100%" cellpadding="0" cellspacing="2" border="1" datasrc="#books" datapagesize="2" id="tblBooks">

Then add this script below to the page. The built-in JavaScript paging functions carry out the navigation through the records.

<input type="button" align="center" onclick="tblBooks.firstPage()" value="|< First " />
<input type="button" align="center" onclick="tblBooks.previousPage()" value="< Previous " />
<input type="button" align="center" onclick="tblBooks.nextPage()" value=" Next >" />
<input type="button" align="center" onclick="tblBooks.lastPage()" value=" Last >|" />

XML FAQ
[Edit this page]  [Page history]  [What links here]  [Discuss this topic]  [Printer Friendly]