Knowledge.ToString()

Generate Html Table from the Single Xml Node List Using Xslt

If you have a list of same xml node and you want to generate the html table with X number of columns, here is the working example. X can be a dynamic or static number based on your need.

Xml data. (Save it as data.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet  href="xformer.xslt" type="text/xsl" ?>
<names>
    <name>Name 1</name>
    <name>Name 2</name>
    <name>Name 3</name>
    <name>Name 4</name>
    <name>Name 5</name>
    <name>Name 6</name>
    <name>Name 7</name>
    <name>Name 8</name>
    <name>Name 9</name>
    <name>Name 10</name>
    <name>Name 11</name>
    <name>Name 12</name>
    <name>Name 13</name>
    <name>Name 14</name>
    <name>Name 15</name>
</names>

Xslt file (Save it as xformer.xslt in the same folder as data.xml)

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>
 
    <xsl:template match="/names">
        <!-- create table tag. -->
        <!-- NOTE: You may need to change the xmlns namespace as per your need-->
        <table xmlns="http://www.w3.org/1999/xhtml" border="1" cellpadding="5" cellspacing="5">
             
            <!-- call rendertr template with paramter-->
            <xsl:call-template name="rendertr">
                <!-- select all "name" nodes and pass it as a parameter to the xslt template-->
                <xsl:with-param name="nodes" select="name"></xsl:with-param>
                <xsl:with-param name="startindex">1</xsl:with-param>
                <!-- change the column count as per your need -->
                <xsl:with-param name="columncount">5</xsl:with-param>
            </xsl:call-template>
        </table>
    </xsl:template>
 
    <!-- define template to render TR and TD tag -->
    <xsl:template name="rendertr">
        <xsl:param name="nodes"></xsl:param>
        <xsl:param name="startindex"></xsl:param>
        <xsl:param name="columncount"></xsl:param>
        <xsl:variable name="count" select="count($nodes)" ></xsl:variable>
        <xsl:variable name="endindex" select="$startindex + $columncount - 1"></xsl:variable>
         
        <xsl:if test="$count >= $startindex ">
            <tr xmlns="http://www.w3.org/1999/xhtml">
                <!-- out of the node list, get only the nodes for which we want to generate the td tag. -->
                <xsl:for-each select="$nodes[position() >= $startindex and not (position() > $endindex)]">
                    <td>
                        <!-- output is the value of the node-->
                        <xsl:value-of select="."/>
                    </td>
                </xsl:for-each>
                 
                <!-- add blank td if needed -->
                <xsl:if test="$endindex > $count">
                    <xsl:call-template name="renderblanktd">
                        <xsl:with-param name="tdcount" select="$endindex - $count"></xsl:with-param>
                    </xsl:call-template>
                </xsl:if>
            </tr>
            <!-- call this template recursively in order to loop through the next set of nodes -->
            <xsl:call-template name="rendertr">
                <xsl:with-param name="nodes" select="$nodes"></xsl:with-param>
                <!-- make the startindex = endindex + 1 to get the next set of nodes -->
                <xsl:with-param name="startindex" select="$endindex+1"></xsl:with-param>
                <!-- keep the column count as it is -->
                <xsl:with-param name="columncount" select="$columncount"></xsl:with-param>
            </xsl:call-template>
 
        </xsl:if>
 
    </xsl:template>
     
     
    <!-- this template renders td with nbsp; -->
    <xsl:template name="renderblanktd">
        <xsl:param name="tdcount"></xsl:param>
        <xsl:if test="$tdcount > 0">
            <!-- 160; represents nbsp; -->
            <td xmlns="http://www.w3.org/1999/xhtml"> </td>
            <!-- call this template recursively to get the correct number of blank td -->
            <xsl:call-template name="renderblanktd">
                <xsl:with-param name="tdcount" select="$tdcount - 1"></xsl:with-param>
            </xsl:call-template>
        </xsl:if>
    </xsl:template>
     
</xsl:stylesheet>

Now open data.xml in the browser and you will see the html table

Download Code for Xslt Dynamic Table

Share

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *