using xslt and XMLfor generating the desired HTML

Question

Hi Guys,

I am using XSLT and XML so that it will generate my desired HTML.

I am having two XMLS, below are the details.

1) Destinations.XML

<?xml version="1.0"?>
<list type="Destinations">
<resources location="include/xml/locations.xml">
<publication>481</publication>
</resources>
<destination id="594051" title="Sydney" url="/asiapacific/australia/sydney.aspx" >
<country id="192395" />
</destination>
<destination id="594088" title="Brisbane" url="/asiapacific/australia/brisbane.aspx" >
<country id="192395" />
</destination>
<destination id="594579" title="Dubai" url="/middleeast/uae/dubai.aspx" >
<country id="192849" />
</destination>
<destination id="594580" title="Abu Dhabi" url="/middleeast/uae/abudhabi.aspx" >
<country id="192849" />
</destination>
</list>

2) Locations.xml

<?xml version="1.0"?>
<list type="Locations">
<region id="192393" code="ASIA" name="Asia &amp; the Pacific" shortname="Asia &amp; the Pacific">
<country id="192395" code="AU" name="Australia" shortname="Australia">
<city id="192397" code="BNE" name="Brisbane" shortname="Brisbane">
<airport id="192399" code="BNE" name="Brisbane International Airport" shortname="Brisbane"></airport>
</city>
<city id="192409" code="SYD" name="Sydney" shortname="Sydney">
<airport id="192411" code="SYD" name="Kingsford Smith Airport" shortname="Sydney"></airport>
</city>
</country>
</region>
<region id="192847" code="MEAF" name="The Middle East &amp; Africa" shortname="The Middle East &amp; Africa">
<country id="192849" code="AE" name="United Arab Emirates" shortname="United Arab Emirates">
<city id="192851" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi">
<airport id="192853" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi"></airport>
</city>
<city id="192855" code="DXB" name="Dubai" shortname="Dubai">
<airport id="192857" code="DXB" name="Dubai International Airport" shortname="Dubai"></airport>
</city>
</country>
</region>
</list>

If you see the destinations.xml we have got the title eg "sydney", also url="/asiapacific/australia/sydney.aspx" as well as got the country ID = 192395, and when you see the Locations.xml there is also Country ID = 192395 and name = "Australia" above that there is its Region name ="Asia & Pacific" , Now I want to use these xmls and write XSLT so that all the list of destinations from destinations.xml will appear with there country name and region name with urls, for country this url will became (/asiapacific/australia/index.aspx) and for region it will became (/asiapacific/index.aspx), below will be HTML generated

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable">
    <tbody>
        <tr>
            <th scope="col" class="first sortSelected">
                <div class="thPadding">
                    <a class="iconDownSortArrow" href="#">Destination</a></div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Country</a></div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Region</a></div>
            </th>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td>
        </tr>
    </tbody>
</table>

Please suggest using XSLT, I want to use pagination also when it more than 20 destinations, below is the html for paginations.

<div class="continueBar">
    <div class="continueBarLeft">
        <strong>Displaying destinations 1-20 of 100</strong></div>
    <div class="continueBarRight">
        <ul class="paginationLinks">
            <!--<li class="noBorder"><a class="iconButtonBackBar" href="#">&nbsp;</a></li>-->
            <li class="noBorder"><span class="iconButtonBackBarOff">&nbsp;</span></li>
            <li><strong class="thisPage">1</strong></li>
            <li class="separatorLine">|</li>
            <li><a href="#">2</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">3</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">4</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">5</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">6</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">7</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">8</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">9</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">10</a></li>
            <!--<li class="last"><span class="iconButtonForwardBarOff">&nbsp;</span></li>-->
            <li class="last"><a class="iconButtonForwardBar" href="#">&nbsp;</a></li>
        </ul>
    </div>
    <div class="clearBoth">
    </div>
</div>

Answer 1

I don't know what kind of "pagination" you want, but this stylesheet:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
    <xsl:key name="kCountryById" match="country" use="@id"/>
    <xsl:variable name="vLocations" select="document(/*/resources/@location)"/>
    <xsl:template match="list">
        <table width="100%" cellspacing="0" cellpadding="0" border="0" 
                                                          class="displayTable">
            <tbody>
                <tr>
                    <th scope="col" class="first sortSelected">
                        <div class="thPadding">
                            <a class="iconDownSortArrow" href="#">Destination</a>
                        </div>
                    </th>
                    <th scope="col" class="sortHover">
                        <div class="thPadding">
                            <a class="iconSortArrowOff" href="#">Country</a>
                        </div>
                    </th>
                    <th scope="col" class="sortHover">
                        <div class="thPadding">
                            <a class="iconSortArrowOff" href="#">Region</a>
                        </div>
                    </th>
                </tr>
                <xsl:apply-templates select="destination"/>
            </tbody>
        </table>
    </xsl:template>
    <xsl:template match="text()"/>
    <xsl:template match="destination">
        <xsl:variable name="vReverseURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" select="@url"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="vCountryURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" 
                                 select="substring-after($vReverseURL,'/')"/>
            </xsl:call-template>
            <xsl:text>/index.asp</xsl:text>
        </xsl:variable>
        <xsl:variable name="vRegionURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" 
                 select="substring-after(substring-after($vReverseURL,'/'),'/')"/>
            </xsl:call-template>
            <xsl:text>/index.asp</xsl:text>
        </xsl:variable>
        <xsl:variable name="me" select="."/>
        <xsl:for-each select="$vLocations">
            <tr>
                <td class="detail first">
                    <a class="arrowSmallFront" href="{$me/@url}">
                        <xsl:value-of select="$me/@title"/>
                    </a>
                </td>
                <td class="detail noLeftBorder">
                    <a class="arrowSmallFront" href="{$vCountryURL}">
                        <xsl:value-of 
                           select="key('kCountryById',$me/country/@id)/@name"/>
                    </a>
                </td>
                <td class="detail noLeftBorder">
                    <a class="arrowSmallFront" href="{$vRegionURL}">
                        <xsl:value-of 
                         select="key('kCountryById',$me/country/@id)/../@name"/>
                    </a>
                </td>
            </tr>
        </xsl:for-each>
    </xsl:template>
    <xsl:template name="reverse">
        <xsl:param name="string" select="''"/>
        <xsl:if test="$string != ''">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" select="substring($string,2)"/>
            </xsl:call-template>
            <xsl:value-of select="substring($string,1,1)"/>
        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

Output:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable">
    <tbody>
        <tr>
            <th scope="col" class="first sortSelected">
                <div class="thPadding">
                    <a class="iconDownSortArrow" href="#">Destination</a>
                </div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Country</a>
                </div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Region</a>
                </div>
            </th>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a>
            </td>
        </tr>
    </tbody>
</table>

Note: Reverse string pattern to allow relative URL to change. Keys with multiple documents source.