Xml, xsl Javascript sorting

Question

I am looking for a way to sort my xml data with javascript, and want to eventually filter out the data as well. I know all this is possible in the xsl file but i would like to do it client side.

I have searched multiple places for sorting with javascript but most of it was either too xml file specific or I couldn't figure out what was going on.

Would really appreciate any advice

Answer 1

The first part of this is performing the transformation in javascript:

function transformXML(_xml, _xsl) {
  var
    xml = typeof _xml == 'string' 
      ? new DOMParser().parseFromString(_xml, 'text/xml') 
      : _xml // assume this is a node already
    ,xsl = typeof _xsl == 'string'
      ? new DOMParser().parseFromString(_xsl, 'text/xml')
      : _xsl // assume this is a node already
    ,processor = new XSLTProcessor()
  ;

  processor.importStylesheet(xsl);

  return processor.transformToDocument(xml.firstChild);
}

This function accepts two params. The first is the xml that you want to transform. The second is the xslt that you want to use to transform the xml. Both params accept either strings that will be transformed to nodes or nodes themselves (such as XHR.responseXML).

The second part of the puzzle is sorting which you will use xsl's built-in xsl:sort.

<xsl:sort
  select="expression"
  lang="language-code"
  data-type="text|number|qname"
  order="ascending|descending"
  case-order="upper-first|lower-first"/>

All parameters are optional besides the select statement.

Sample sort usage:

<xsl:for-each select="catalog/cd">
  <xsl:sort select="artist"/>

  <xsl:value-of select="artist"/>
  <xsl:text> - </xsl:text>
  <xsl:value-of select="title"/>
</xsl:for-each>

You can find more information about xsl:sort at w3schools.

Answer 2

I wouldn't sort in the xsl sheet. I use the tablesorter plugin to jquery.

The Getting Started section is very straightforward(and is reproduced below).

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the tag of your HTML document:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

Start by telling tablesorter to sort your table when the document is loaded:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);