XML to HTML using Datatables jQuery Plug-in [closed]

mf1983

New Member
From a xml source, with the help of @YvesB i wrote the following \[code\]xslt file\[/code\] for \[code\]converting the xml to html\[/code\]. I tried to use the Datatables Row Grouping http://jsfiddle.net/nanoquantumtech/RgKPZ/ but the result is not the expected. The final desired result is this: http://www.flickr.com/photos/blondie_lg/7577776346/in/photostream . I need your help, your ideas and your advices for the configuration.\[code\]<?xml version="1.0" encoding="UTF-8"?><!-- DWXMLSource="722f4791-e2d0-46c2-90f6-83100dbf3553.xml" --><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/><!-- param values may be changed during the XSL Transformation --><xsl:param name="shared_item_name"> Shared Item Name </xsl:param><xsl:param name="description"> Description </xsl:param><xsl:param name="properties"> Properties </xsl:param><xsl:template match="/"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Problem</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/css/normalize.css" /> <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js"></script> <script type='text/javascript' src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script> <style type='text/css'> tr:hover th, tr:hover td { background-image: none; } td { height: 26px; padding: 0px 0px 0px 20px; text-align: left; border-bottom: 1px solid #ffffff; vertical-align: middle; } td.group { background-color: border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff; } td.expanded-group { background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center transparent; } tr:hover td.expanded-group { background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center; } td.collapsed-group { background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center transparent; } tr:hover td.collapsed-group { background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center; } .DataTables_sort_wrapper span { float: right; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(document).ready(function () { $('#problem').dataTable({ "bLengthChange": false, "bPaginate": false, "bJQueryUI": false, // false for disabling Theme Roller at headers (grey) "bFilter": false, // no search box "bInfo": false, // no infos at the bottom part "bSort": false // no sorting in every single column }).rowGrouping({ "bExpandableGrouping": true, "bExpandSingleGroup": false, "iExpandGroupOffset": -1, "asExpandedGroups": [""] }); //GridRowCount(); no counter in every single group }); function GridRowCount() { $('span.rowCount-grid').remove(); $('input.expandedOrCollapsedGroup').remove(); $('.dataTables_wrapper').find('[id|=group-id]').each(function () { var rowCount = $(this).nextUntil('[id|=group-id]').length; $(this).find('td').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': rowCount }))); }); $('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', { 'type': 'button', 'class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expanded All Group' })); $('.expandedOrCollapsedGroup').live('click', function () { if ($(this).hasClass('collapsed')) { $(this).addClass('expanded').removeClass('collapsed').val('Collapse All Group').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click'); } else { $(this).addClass('collapsed').removeClass('expanded').val('Expanded All Group').parents('.dataTables_wrapper').find('.expanded-group').trigger('click'); } }); }; });//]]> </script> </head> <body> <div id="demo"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="display" id="problem"> <thead> <tr bgcolor="#9acd32"> <th> <xsl:value-of select="$shared_item_name" /> </th> <th> <xsl:value-of select="$description" /> </th> <th> <xsl:value-of select="$properties" /> </th> <xsl:for-each select="IR/IRO[1]/P[1]/T"> <th> <xsl:value-of select="@s" /> </th> </xsl:for-each> </tr> </thead> <tbody> <xsl:apply-templates/> </tbody> </table> </div> </body></html></xsl:template><xsl:template match="/IR/IRO/P"><tr> <xsl:choose> <xsl:when test='count(preceding-sibling::P)=0'> <xsl:variable name='c'> <xsl:choose> <xsl:when test='(@i="True") or (count(following-sibling::P[@i="True"]) > 0)'> <xsl:choose> <xsl:when test='count(../descendant::P[@i="True"]) > 0'>#980000</xsl:when> <xsl:otherwise>#FFFF00</xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test='count(../descendant::P[@i="True"]) > 0'>#FF6600</xsl:when> <xsl:otherwise>#999999</xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:variable> <td><xsl:attribute name='bgcolor'><xsl:value-of select='$c' /></xsl:attribute><xsl:value-of select='../@n' /></td> <td bgcolor="#999999"><xsl:value-of select='../@d' /></td> </xsl:when> <xsl:otherwise> <td></td> <td></td> </xsl:otherwise> </xsl:choose> <td bgcolor="#999999"><xsl:value-of select='@dn' /></td> <xsl:apply-templates /></tr></xsl:template><xsl:template match="/IR/IRO/IRO/P"><tr> <xsl:choose> <xsl:when test='count(preceding-sibling::P)=0'> <xsl:variable name='c'> <xsl:choose> <xsl:when test='(@i="True") or (count(following-sibling::P[@i="True"]) > 0)'>#FFFF00</xsl:when> <xsl:otherwise>#999999</xsl:otherwise> </xsl:choose> </xsl:variable> <td><xsl:attribute name='bgcolor'><xsl:value-of select='$c' /></xsl:attribute><xsl:value-of select='../@n' /></td> <td bgcolor="#999999"><xsl:value-of select='../@d' /></td> </xsl:when> <xsl:otherwise> <td></td> <td></td> </xsl:otherwise> </xsl:choose> <td bgcolor="#999999"><xsl:value-of select='@dn' /></td> <xsl:apply-templates /></tr></xsl:template><xsl:template match="T"><td> <xsl:attribute name='bgcolor'> <xsl:choose> <xsl:when test='../@i="True"'>#FFFF00</xsl:when> <xsl:otherwise>#999999</xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:value-of select='@v' /></td></xsl:template></xsl:stylesheet>\[/code\]The xml source is:\[code\]<?xml version="1.0" encoding="UTF-8"?><IR><IRO c="False" d="" n="ANTPETX-A171-AU31-PA015"><P i="False" dn="Equipment prefix" pd="EquipPrefix"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><P i="False" dn="Equipment suffix" pd="EquipSuff"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><P i="False" dn="Equipment sequence number" pd="EquipSeqNo"><T v="15" s="LastIn"/><T v="15" s="EQD"/><T v="15" s="PID"/></P><IRO c="False" d="" n="ANTPETX-A171-AU31-PA015-N2"><P i="False" dn="Name" pd="Name"><T v="ANTPETX-A171-AU31-PA015-N2" s="LastIn"/><T v="ANTPETX-A171-AU31-PA015-N2" s="EQD"/><T v="ANTPETX-A171-AU31-PA015-N2" s="PID"/></P><P i="True" dn="Nominal diameter" pd="NominalDiameter"><T v="40 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="40 mm" s="PID"/></P></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA015-N1"><P i="True" dn="Nominal diameter" pd="NominalDiameter"><T v="40 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="40 mm" s="PID"/></P><P i="False" dn="Process equipment component type 2" pd="ProcessEqCompType2"><T v="Nozzle" s="LastIn"/><T v="Nozzle" s="EQD"/><T v="Nozzle" s="PID"/></P></IRO></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA016"><P i="False" dn="Name" pd="Name"><T v="ANTPETX-A171-AU31-PA016" s="LastIn"/><T v="ANTPETX-A171-AU31-PA016" s="EQD"/><T v="ANTPETX-A171-AU31-PA016" s="PID"/></P><P i="False" dn="Type (level 2)" pd="EqType2"><T v="Fluid-transfer machine" s="LastIn"/><T v="Fluid-transfer machine" s="EQD"/><T v="Fluid-transfer machine" s="PID"/></P><IRO c="False" d="" n="ANTPETX-A171-AU31-PA016-N2"><P i="False" dn="Nominal diameter" pd="NominalDiameter"><T v="20 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="20 mm" s="PID"/></P><P i="False" dn="Name" pd="Name"><T v="ANTPETX-A171-AU31-PA016-N2" s="LastIn"/><T v="ANTPETX-A171-AU31-PA016-N2" s="EQD"/><T v="ANTPETX-A171-AU31-PA016-N2" s="PID"/></P></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA016-N1"><P i="False" dn="Nominal diameter" pd="NominalDiameter"><T v="20 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="20 mm" s="PID"/></P><P i="False" dn="Process equipment component type 2" pd="ProcessEqCompType2"><T v="Nozzle" s="LastIn"/><T v="Nozzle" s="EQD"/><T v="Nozzle" s="PID"/></P><P i="False" dn="Process equipment component type 3" pd="ProcessEqCompType3"><T v="Pipe Nozzle" s="LastIn"/><T v="Pipe Nozzle" s="EQD"/><T v="" s="PID"/></P></IRO></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA017"><P i="False" dn="BY_IdentLetter" pd="BY_IdentLetter"><T v="PA" s="LastIn"/><T v="PA" s="EQD"/><T v="PA" s="PID"/></P><P i="False" dn="Equipment prefix" pd="EquipPrefix"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><P i="False" dn="Equipment suffix" pd="EquipSuff"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><IRO c="False" d="" n="ANTPETX-A171-AU31-PA017-N1"><P i="True" dn="Nominal diameter" pd="NominalDiameter"><T v="40 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="40 mm" s="PID"/></P><P i="False" dn="Process equipment component type 2" pd="ProcessEqCompType2"><T v="Nozzle" s="LastIn"/><T v="Nozzle" s="EQD"/><T v="Nozzle" s="PID"/></P><P i="False" dn="Process equipment component type 3" pd="ProcessEqCompType3"><T v="Pipe Nozzle" s="LastIn"/><T v="Pipe Nozzle" s="EQD"/><T v="" s="PID"/></P></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA017-N2"><P i="True" dn="Nominal diameter" pd="NominalDiameter"><T v="40 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="40 mm" s="PID"/></P><P i="False" dn="Process equipment component type 3" pd="ProcessEqCompType3"><T v="Pipe Nozzle" s="LastIn"/><T v="Pipe Nozzle" s="EQD"/><T v="" s="PID"/></P><P i="False" dn="Process equipment component type 1" pd="ProcessEqCompType1"><T v="Mechanical Component" s="LastIn"/><T v="Mechanical Component" s="EQD"/><T v="Mechanical Component" s="PID"/></P></IRO></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA018"><P i="False" dn="Equipment prefix" pd="EquipPrefix"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><P i="False" dn="Equipment suffix" pd="EquipSuff"><T v="<b>" s="LastIn"/><T v="<b>" s="EQD"/><T v="<b>" s="PID"/></P><IRO c="False" d="" n="ANTPETX-A171-AU31-PA018-N1"><P i="False" dn="Nominal diameter" pd="NominalDiameter"><T v="20 mm" s="LastIn"/><T v="20 mm" s="EQD"/><T v="20 mm" s="PID"/></P><P i="False" dn="Process equipment component type 1" pd="ProcessEqCompType1"><T v="Mechanical Component" s="LastIn"/><T v="Mechanical Component" s="EQD"/><T v="Mechanical Component" s="PID"/></P></IRO><IRO c="False" d="" n="ANTPETX-A171-AU31-PA018-N2"><P i="False" dn="Process equipment component type 3" pd="ProcessEqCompType3"><T v="Pipe Nozzle" s="LastIn"/><T v="Pipe Nozzle" s="EQD"/><T v="" s="PID"/></P><P i="False" dn="Process equipment component type 2" pd="ProcessEqCompType2"><T v="Nozzle" s="LastIn"/><T v="Nozzle" s="EQD"/><T v="Nozzle" s="PID"/></P></IRO></IRO></IR>\[/code\]
 
Back
Top