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

If you bind your xml data to a table, it will display records in rows. The datapagesize attribute of the <table> tag controls the number of records displayed on one 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, firstly set the id attribute of a table.

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

Then add the following script to the page. The built-in JavaScript paging functions complete 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 >|" />

Back to XML FAQ

 

Advertisement

Free Magazine