[xsl] tableheader sort on date with DOM dynamically and optimisation xs lt/xml code

Subject: [xsl] tableheader sort on date with DOM dynamically and optimisation xs lt/xml code
From: "Braumüller, Hans" <h.braumueller@xxxxxxxxxxxx>
Date: Fri, 5 Apr 2002 09:41:05 +0200
Hello friends,

i am about one month in this list and i have learned a lot!

ThANK YOU VERY MUCH!

Now i have following  questions :-)

I enclosed you my working prototype-example. It is a mix-up from various
sorting examples i found in the web,  stock-sorter by Michael Leventhal,
Beers from Chris Bayes and last not least the most powerful because of his
simple way, Customers from Eric Yao.

I want add the feature sorting by date on my tableheader by event Onclick
using standard DOM. I know, that i must convert the date in a number and
then sort, by i don´t know how to perform this dynamically. 

1. How can i sort by dynamically by date ?

2. Any one have an idea how to convert the innerHTML transformation in
purely DOM
(output.innerHTML = xmlDoc.documentElement.transformNode(xslDoc);)
 ?

3. Further suggestions to improve my xslt-js-code and xml-source ? (First i
try to write <row id="r1">
	<col name="bspnr" id="r1_c0"> to reduce my code in xslt, but have
had trouble sorting correctly! ) 


************ XML-SOURCE **************

<?xml version='1.0'?>
<?xml:stylesheet href="prototyp-test.xsl" type="text/xsl"?>
<root>
<tabelle>
<row>
		<header name="bspnr"  format="text">Bank</header>
		<header name="date" format="number">Date</header>
		<header name="gspnr" format="number">Amount</header>
		<header name="isocode" format="text">Currency</header>
</row>
<row id="r0">
	<bspnr id="r0_c0">b</bspnr>
	<date id="r0_c1">12.10.2001</date>
	<gspnr   id="r0_c2">4711.22</gspnr>
	<isocode id="r0_c3" >USD</isocode>
	
</row>
<row id="r1">
	<bspnr id="r1_c0">a</bspnr>
	<date id="r1_c1">01.10.2012</date>
	<gspnr   id="r1_c2">47122.00</gspnr>
	<isocode id="r1_c3">EUR</isocode>
	
</row>
<row id="r2">
	<bspnr id="r2_c0">c</bspnr>
	<date id="r2_c1">10.12.2004</date>
	<gspnr id="r2_c2">78653.23</gspnr>
	<isocode id="r2_c3">USD</isocode>
	
</row>
<row id="r3">
	<bspnr id="r3_c0">d</bspnr>
	<date id="r3_c1">12.10.2005</date>
	<gspnr id="r3_c2">584309634.00</gspnr>
	<isocode id="r3_c3" >CAN</isocode>
	
</row>
</tabelle>
<optionen name="isocode">
<option >EUR</option>
<option>USD</option>
<option>CAN</option>
</optionen>
</root>


************ XSLT-SOURCE **************

<?xml version="1.0"  encoding="ISO-8859-1"  ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
<xsl:decimal-format grouping-separator="." decimal-separator=","/>
	<xsl:template match="/">
		<html>
			<head>
				<title>Sorting</title>	
				<script language="JavaScript">
				xmlDoc = document.XMLDocument;
				xslDoc = document.XSLDocument;
				function sort(field,format){
						sortby =
xslDoc.selectSingleNode("//xsl:sort/@select");
					//test = "//xsl:sort[@select='" +
field + "']";
					//alert (test);
						datatype =
xslDoc.selectSingleNode("//xsl:sort/@data-type");
						if (format == 'number'){
							datatype.text
="number";
						}	
						if(sortby.text == field){
							orderby  =
xslDoc.selectSingleNode("//xsl:sort/@order");
							if(orderby.text ==
'ascending'){
								orderby.text
= "descending";
							}
							else{	
								orderby.text
= "ascending";
							}	
						}
						sortby.text=field;
						datatype.text = format;
						output.innerHTML =
xmlDoc.documentElement.transformNode(xslDoc);
						}
					</script>
			</head>
			<body bgcolor="lightgrey"  id="output">
				<xsl:apply-templates select="root" />
			</body>
		</html>
	</xsl:template>
	
	<xsl:template match="root">
		<form>
			<xsl:apply-templates select="tabelle" />
		</form>
	</xsl:template>
	
	<xsl:template match="tabelle">
		<table cellpadding="0" cellspacing="0" border="1"
align="center">
			<tr>
			<xsl:for-each select="row/header">
				<th align="center" bgcolor="#FF4242"
style="color:#ffff00;padding:0.2em">
				 <xsl:attribute name="format"><xsl:value-of
select="@format" /></xsl:attribute>
				<xsl:attribute name="name"><xsl:value-of
select="@name" /></xsl:attribute>		
				<xsl:attribute
name="onclick">sort(this.name,this.format)</xsl:attribute>
				<xsl:value-of select="."/>
				</th>
			</xsl:for-each>
			</tr>
		<xsl:apply-templates select="row">
			<xsl:sort select="bspnr" order="ascending"
data-type="text"/>	
		</xsl:apply-templates>
		</table>
	</xsl:template>
	
	<xsl:template match="row">
		<tr>
		<xsl:apply-templates select="bspnr" />
		<xsl:apply-templates select="date" />
		<xsl:apply-templates select="gspnr" />
		<xsl:apply-templates select="isocode" />
		</tr>
	</xsl:template>
	
	<xsl:template match="bspnr">
		<td>
			<input type="text"><xsl:attribute
name="name"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="value"><xsl:value-of select="."/></xsl:attribute></input>
		</td>
	</xsl:template>
	
	<xsl:template match="date">
		<td align="right">
			<input type="text"><xsl:attribute
name="name"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="value"><xsl:value-of select="."/></xsl:attribute></input>
		</td>
	</xsl:template>
	
	<xsl:template match="gspnr">
		<td>
			<input type="text"><xsl:attribute
name="name"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="value"><xsl:value-of
select="format-number(.,'#.##0,##')"/></xsl:attribute></input>
		</td>
	</xsl:template>
	
	<xsl:template match="isocode">
	<xsl:param name="isocode" select="."/>
		<td>
			<select style="width:100%"><xsl:attribute
name="name"><xsl:value-of select="@id"/></xsl:attribute><xsl:attribute
name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:for-each
select="//root/optionen/option">
				<option><xsl:if
test=".=$isocode"><xsl:attribute
name="SELECTED">true</xsl:attribute></xsl:if><xsl:value-of
select="."/></option></xsl:for-each>
			</select>
		</td>
	</xsl:template>
</xsl:stylesheet>
 
Hans Braumüller 
Systementwickler Web-Design 
Hanse Orga AG
Sportallee 41 
D-22335 Hamburg 
Telefon: (+49) 040 51 48 08-62 
Telefax: (+49) 040 51 48 08-88 
E-Mail: h.braumueller@xxxxxxxxxxxx 
-- + -- 
Networking Artist
http://crosses.net
http://kunstserie.com

 

 
i. A. Hans Braumüller 
Systementwickler Web-Design 
Hanse Orga AG
Sportallee 41 
D-22335 Hamburg 
Telefon: (+49) 040 51 48 08-62 
Telefax: (+49) 040 51 48 08-88 
E-Mail: h.braumueller@xxxxxxxxxxxx 

 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread