using xslt to sort xml via onclick function

Question

I would like to know the simplest way to sort an xml/xslt table by clicking associated buttons. I'm pretty familiar with xslt but very new to javascript so go easy on me.

I've looked at many examples on the internet but it seems like nothing really fits what I'm trying to do or perhaps my coding skills just aren't up to par.

I might be way off but I was thinking something along the lines of...

xslt:

<button onclick="title()">sort by title</button>
<!--some xsl code-->
<xsl:for each select="record">
<xsl:sort id="title" select="dates/year"/>
<!--more xsl code-->

javascript:

function title() {
document.getElementById(title).select="titles/title";
}

I'm also not exactly clear on where to put the javascript code. I've already got a .js file that displays my xml & xsl files as an html. Can I put this code there? Or do I need inline script on my xsl file? I've seen many ways of attaching javascript to an xsl file, but I'm not sure which way is best for my purposes

Answer 1

If you're comfortable with XSLT but not with Javascript then you might like to look at Saxon-CE, which provides XSLT 2.0 in the browser with extension to handle user interaction events. There's a simple example which demonstrates how to sort tables in response to a mouse-click here:

http://www.saxonica.com/ce/doc/samples/booklist.xml

Answer 2

This is what I ended up doing and it works well!

HTML:there was a div for the xml document load

<button type="button" id="sorttitle" onclick="sorttitle()">sort by title</button>
<button type="button" id="sortauthor" onclick="sortauthor()">sort by author</button>
<button type="button" id="sortyear" onclick="sortyear()">sort by year</button>
<button type="button" id="sortpublisher" onclick="sortpublisher()">sort by publisher</button>

JAVASCRIPT

function sorttitle(){
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sorttitle").style.backgroundColor="#666";
xsl=loadXMLDoc("sorttitle.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortauthor(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#666";
xsl=loadXMLDoc("sortauthor.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortyear(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#666";
xsl=loadXMLDoc("sortyear.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

function sortpublisher(){
document.getElementById("sorttitle").style.backgroundColor="#000";
document.getElementById("sortauthor").style.backgroundColor="#000";
document.getElementById("sortyear").style.backgroundColor="#000";
document.getElementById("sortpublisher").style.backgroundColor="#666";
xsl=loadXMLDoc("sortpublisher.xsl");
if (window.ActiveXObject)
  {
  sortedDocument=xml.transformNode(xsl);
  document.getElementById('content').innerHTML=sortedDocument;
}
else {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  sortedDocument = xsltProcessor.transformToFragment(xml,document);
  document.body.replaceChild(sortedDocument,document.getElementById('content'));
}}

XML: I then had multiple xsl files where it specified a certain sort. Each function called a different style sheet.