Xml, xsl Javascript sorting

Question

Hi guys,

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

Hey Fluf,

A very good approuch is to have a XSL with parameer check inside of it for sorting and then apply a few js on it,a fully working example is available at:

http://www.google.com.br/search?hl=pt-BR&q=xml+javascript+data+sort&meta=

Answer 2

Why not just turn it into an array of objects and sort that, since you will probably need to convert it to display it anyway.

You may find some help here though if you must sort xml in javascript. http://www.velocityreviews.com/forums/t170211-clientside-filtering-and-sorting-xml-with-javascript-work-in-iebut-not-firefox.html

Answer 3

XSLT is supported on all major browser releases FYI ^_^ (IE 6+, FF 1+, SF 2+, CHROME, OPERA 9+)

not sure what your doing but XSLT can also be used in ajax

Answer 4

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 5

Well, why don't you use the prototype library? It has http://prototypejs.org/api/enumerable/sortBy It has http://prototypejs.org/api/enumerable/grep So why don't you just sort your elements and grep your elements? If you want that client-side in the javascript?

Answer 6

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&lt;/td&gt; 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com&lt;/td&gt; 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com&lt;/td&gt; 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com&lt;/td&gt; 
</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]]} ); 
    } 
);