Ok so I am pretty much a total beginner when it comes to any type of coding. I've learned everything I know from either webucator.com or w3schools.com so sorry if this is pretty stupid. Anyway I have a xml file that is being transformed by a xsl file to be displayed as html. I have the data arragened in a table. What I need is for the headers of the table to be buttons that when clicked will sort the data acording to alphabetical order. From what I understand I need some Javascript to get this done. I know how to use the <xsl:sort> element to sort when the page is loaded but how do I get it to sort on click.
Below is what the table looks like right now without the buttons(I put in one button to show where it needs to be). please help
I'd do a quick googlin' for "table sort js" and see if there wasn't a neat jQuery plugin (or similar).
Depending on the data and possible pagination involved, it can be a little daunting to implement sorting with XSLT (personally, I don't even think it belongs in the"view") - it can be done, but it takes a round-trip to the server, which the JavaScript solution won't.
To do it with XSLT you need to create links in the header cells instead of buttons (use CSS to style them as buttons if necessary) so that a link adds a sort parameter, e.g.:
Then you need to grab the sort parameter inside the XSLT - in umbraco you can use umbraco.library:RequestQueryString('sort') to get it - and finally you need to add the sort statement - the way your XML is structured, you may be able to get away with this:
This is kinda late but thank you very much!!I didn't know there was such a thing as jquery. Anyway I was able to use jquery and the tablesorter plugin and it works beautifully now =D
Sorting xml data on click
Ok so I am pretty much a total beginner when it comes to any type of coding. I've learned everything I know from either webucator.com or w3schools.com so sorry if this is pretty stupid. Anyway I have a xml file that is being transformed by a xsl file to be displayed as html. I have the data arragened in a table. What I need is for the headers of the table to be buttons that when clicked will sort the data acording to alphabetical order. From what I understand I need some Javascript to get this done. I know how to use the <xsl:sort> element to sort when the page is loaded but how do I get it to sort on click.
Below is what the table looks like right now without the buttons(I put in one button to show where it needs to be). please help
<table border="1">
<tr>
<th><b><button type="button" onclick="what is suposed to go here"> OEM</button></b></th>
<th><b>Model</b></th>
<th><b>Inventory#</b></th>
<th><b>Service Tag</b></th>
<th><b>Purchased</b></th>
<th><b>waranty</b></th>
</tr>
<xsl:for-each select="computer">
<xsl:sort select="model" name="sort"/>
<tr>
<td><b><xsl:value-of select="oem"/></b></td>
<td><b><xsl:value-of select="model"/></b></td>
<td><b><xsl:value-of select="inventory"/></b></td>
<td><b><xsl:value-of select="service_tag"/></b></td>
<td><b><xsl:value-of select="purchased_date"/></b></td>
<td><b><xsl:value-of select="waranty"/></b></td>
</tr>
</xsl:for-each>
Hi Tom,
I'd do a quick googlin' for "table sort js" and see if there wasn't a neat jQuery plugin (or similar).
Depending on the data and possible pagination involved, it can be a little daunting to implement sorting with XSLT (personally, I don't even think it belongs in the"view") - it can be done, but it takes a round-trip to the server, which the JavaScript solution won't.
To do it with XSLT you need to create links in the header cells instead of buttons (use CSS to style them as buttons if necessary) so that a link adds a sort parameter, e.g.:
Then you need to grab the sort parameter inside the XSLT - in umbraco you can use umbraco.library:RequestQueryString('sort') to get it - and finally you need to add the sort statement - the way your XML is structured, you may be able to get away with this:
<xsl:variable name="sortBy" select="umbraco.library:RequestQueryString('sort')" /> <xsl:for-each select="computer"> <xsl:sort select="*[name() = $sortBy]" data-type="text" order="ascending" /> <!-- Output --> </xsl:for-each>(But do check the JS-only implementations first :-)
/Chriztian
This is kinda late but thank you very much!!I didn't know there was such a thing as jquery. Anyway I was able to use jquery and the tablesorter plugin and it works beautifully now =D
is working on a reply...