Using xslt and XML to create the desired HTML

Question

I use XSLT and XML so that it generates my desired HTML.

I have 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 destination.xml, we have a header, for example, "sydney", also url = "/asiapacific/australia/sydney.aspx", and also got the country identifier = 192395 and when you see "Locations". xml is also the country ID = 192395 and name = "Australia", above which is its region name = "Asia and the Pacific." Now I want to use these xmls and write XSLT so that the entire list of destinations from destination.xml with the name of the country and region with URLs, for the country this URL will become (/asiapacific/australia/index.aspx), and for region it will become (/asiapacific/index.aspx), HTML will be created below

 <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 there are more than 20 destinations, below is the html for pagination.

 <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 “numbering” you want, but this stylesheet:

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <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> 

Conclusion:

 <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 resolve relative url. Keys with multiple document sources.