AJAX Grid Step By Step Tutorial 4: In client side, we will use Extensible Stylesheet language (XSL). If you still understand about XSL, don't worry. It is easy to understand (but I will not talk more about XSL at this post, may be next time).
Create a file named "grid.xsl" within www/test/ajax/books. Enter following code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>AJAX Grid</h2>
<xsl:call-template name="menu" />
<form id="grid_form_id">
<table class="list">
<tr>
<th class="th1">ID</th>
<th class="th2">Title</th>
<th class="th3">Author</th>
<th class="th4">Description</th>
<th class="th5">On Sale</th>
</tr>
<xsl:for-each select="data/grid/row">
<xsl:element name="tr">
<xsl:attribute name="id">
<xsl:value-of select="id" />
</xsl:attribute>
<td><xsl:value-of select="id" /></td>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="author" /></td>
<td><xsl:value-of select="description" /></td>
<td>
<xsl:choose>
<xsl:when test="on_sale > 0">
<input type="checkbox" name="on_sale" disabled="disabled" checked="checked" />
</xsl:when>
<xsl:otherwise>
<input type="checkbox" name="on_sale" disabled="disabled"/>
</xsl:otherwise>
</xsl:choose>
</td>
</xsl:element>
</xsl:for-each>
</table>
</form>
<xsl:call-template name="menu" />
</xsl:template>
<xsl:template name="menu">
<xsl:for-each select="data/params">
<table>
<tr>
<td class="left">
<xsl:value-of select="totItems" /> Items
</td>
<td class="right">
<xsl:choose>
<xsl:when test="previous_page>0">
<xsl:element name="a">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onclick">
loadGridPage(<xsl:value-of select="previous_page" />)
</xsl:attribute>
Previous Page
</xsl:element>
</xsl:when>
</xsl:choose>
</td>
<td class="left">
<xsl:choose>
<xsl:when test="next_page>0">
<xsl:element name="a">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onclick">
loadGridPage(<xsl:value-of select="next_page" />)
</xsl:attribute>
Next Page
</xsl:element>
</xsl:when>
</xsl:choose>
</td>
<td class="right">
page <xsl:value-of select="getPage" />
of <xsl:value-of select="totPages" />
</td>
</tr>
</table>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Test it. Just make sure well done. Point your browser to http://localhost/test/ajax/books/grid.xsl.
