TopXML JavaScript library : Table Column sorting using XML, XSL and JavaScript

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

JavaScript
JavaScript
JavaScript Contents
Display of Hierarchical Data Islands
x++ beta 0.2 release (includes ISAPI filter/interpreter)
HTTP File Commander
XML Ticker
Fading Ticker
How to understand the flow of control in XLST
Begginers, search the Bible
JavaScript Ticker (using Tabular Data Control)
-postfix.aspx>Infix <> Postfix
Nested Tables And Data Island
XML Data Traversal
TrimWhiteSpace
Two Tier Data Islands with Expanding/Collapsing Child elements.
Escape special characters using JavaScript and regular expressions
Sticky Table Headers
Dynamically Filling HTML Select Box from XML Data Island using Javascript.
XML Basics Handbook

LAMP >>

By	Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
First Posted	05/14/2002
Times viewed	728

Table Column sorting using XML, XSL and JavaScript

This post contains attachments
v20020514202732.zip

Summary This article presents an application which sorts table column.

In this article, I designed and developed an application, which builds a table with a set of columns using XML, XSL and JavaScript. The important feature of this application is sorting on table columns. When the user clicks on a column, the table data will be sorted in ascending order taking the selected column into consideration.

Additional information
Code of LoadEmpInfo.htm ____________________________________________ <HTML> <HEAD> <script language="JavaScript"> function sortThroughXSL(sColumn,sOrder,sSort) { var sString = '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" ' + 'xmlns:msxml="urn:schemas-microsoft-com:xslt" ' + 'version="1.0"> ' + '<xsl:output method="xml" media-type="text/html"/> ' + '<xsl:param name="sort" select=" \'yes\' "/> ' + '<xsl:param name="sortOrder" select=" \'ascending\' "/>' + '<xsl:param name="sortColumn" select=" \' ' + sColumn + ' \' "/>'; //alert(sString); sString += '<xsl:template match="/">' + '<xsl:call-template name="table_display">' + '<xsl:with-param name="tablecontainer" select="/*"/>' + '<xsl:with-param name="columns" select="$columns"/>' + '</xsl:call-template>' + '</xsl:template>'; sString += '<xsl:template name="table_display">' + '<xsl:param name="tablecontainer" select="/*"/>' + '<xsl:param name="columns">' + '<xsl:copy-of select="$columns"/>' + '</xsl:param>' + '<xsl:apply-templates select="$tablecontainer" mode="BuildTable">' + '<xsl:with-param name="columns" select="$columns"/>' + '</xsl:apply-templates>' + '</xsl:template>'; sString += '<xsl:template match="*" mode="BuildTable">' + '<xsl:param name="columns" select="$columns"/>' + '<xsl:variable name="columns_ns" select="msxml:node-set($columns)"/>' + '<div>' + '<table cellpadding="3" cellspacing="0">' + ' <tr>' + ' <xsl:for-each select="$columns_ns/*">' + ' <th style="background-color:gray;cursor:hand;" onClick="sortOrderColumn(\'{@title}\')">' + ' <xsl:choose>' + ' <xsl:when test="@title">' + ' <xsl:apply-templates select="@title" mode="Table_Head"/>' + ' </xsl:when>' + ' <xsl:otherwise>' + ' <xsl:apply-templates select="@id" mode="Table_Head"/>' + ' </xsl:otherwise>' + ' </xsl:choose>' + ' </th>' + ' </xsl:for-each>' + ' </tr>' + '<xsl:choose>' + ' <xsl:when test="$sort=\'yes\'">' + ' <xsl:apply-templates select="*" mode="Table_Row">' + ' <xsl:sort select=".//' + sColumn + '" order="{$sortOrder}"/>' + ' </xsl:apply-templates>' + ' </xsl:when>' + ' <xsl:otherwise>' + ' <xsl:apply-templates select="*" mode="Table_Row"/>' + ' </xsl:otherwise>' + '</xsl:choose>' + '</table>' + '</div>' + '</xsl:template>'; sString += '<xsl:template match="*" mode="Table_Row">' + '<xsl:variable name="columns_ns" select="msxml:node-set($columns)"/>' + '<xsl:variable name="properties" select="*"/>' + '<xsl:variable name="context" select="."/>' + '<xsl:variable name="position" select="position()"/>' + '<tr xsl:use-attribute-sets="Table_Row">' + '<xsl:for-each select="$columns_ns/*">' + ' <xsl:variable name="column" select="@id"/>' + ' <xsl:variable name="property" select="$properties[name(.)=$column~"/>' + ' <xsl:choose>' + ' <xsl:when test="$property">' + ' <td>' + ' <xsl:apply-templates select="$property" mode="Table_Cell"/>' + ' </td>' + ' </xsl:when>' + ' <xsl:otherwise>' + ' </xsl:otherwise>' + ' </xsl:choose>' + '</xsl:for-each>' + '</tr>' + '</xsl:template>'; sString += '<xsl:param name="columns"> ' + ' <column id="Name" title="Name"/> ' + ' <column id="Address" title="Address"/> ' + ' <column id="Department" title="Department"/> ' + '</xsl:param>'; sString += '<xsl:template match="Name" mode="Table_Cell"> ' + '<xsl:value-of select="concat(First_Name,\' \',Last_Name)"/> ' + '</xsl:template>'; sString += '<xsl:template match="Address" mode="Table_Cell"> ' + '<xsl:value-of select="concat(Address1,\' , \',Address2)"/> ' + '</xsl:template>'; sString += '<xsl:template name="Table_Style">' + '<style>' + '</style>' + '</xsl:template>'; sString += '<xsl:template name="Table_Script">' + '</xsl:template>'; sString += '<xsl:attribute-set name="Table_Row">' + '<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>' + '<xsl:attribute name="title"><xsl:value-of select="Address"/></xsl:attribute>' + '<xsl:attribute name="onclick"></xsl:attribute>' + '</xsl:attribute-set>'; sString += '</xsl:stylesheet>'; return sString; } function loadEmpInfo(sSortColumn) { var oXMLDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); oXMLDoc.async = false; var bXMLDoc = oXMLDoc.load("Employees.xml"); if (bXMLDoc) { } else { alert("Employees Data not available"); return; } var oXSLDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); oXSLDoc.async = false; var bXSLDoc = oXSLDoc.load("sortEmpTable.xsl"); if (bXSLDoc) { var oTransform = new ActiveXObject("MSXML2.XSLTemplate"); oTransform.stylesheet = oXSLDoc.documentElement; var oProcessor = oTransform.createProcessor(); oProcessor.input = oXMLDoc; oProcessor.transform(); var sOutput = oProcessor.output; divEmpInfo.innerHTML = sOutput; //alert("Output = " + sOutput); oProcessor = null; oTransform = null; } else { alert("Please verify your stylesheet"); } } function sortOrderColumn(sColumn,sOrder,sSort) { var oXMLDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); oXMLDoc.async = false; var bXMLDoc = oXMLDoc.load("Employees.xml"); if (bXMLDoc) { } else { alert("Employees Data not available"); return; } //alert(sColumn); var sNewStyle = sortThroughXSL(sColumn,sOrder,"yes"); //alert(sNewStyle); var oXSLDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); oXSLDoc.async = false; var bXSLDoc = oXSLDoc.loadXML(sNewStyle); //alert(oXSLDoc.xml); if (bXSLDoc) { var oTransform = new ActiveXObject("MSXML2.XSLTemplate"); oTransform.stylesheet = oXSLDoc.documentElement; var oProcessor = oTransform.createProcessor(); oProcessor.input = oXMLDoc; oProcessor.transform(); var sOutput = oProcessor.output; divEmpInfo.innerHTML = sOutput; //alert("Output = " + sOutput); } else { alert("Please verify your stylesheet"); } } </script> <TITLE>Table Column sorting</TITLE> </HEAD> <BODY onLoad='sortOrderColumn("First_Name","ascending","yes")'> <h2>Load Employee Info</h2> <div id="divEmpInfo" style="border-style:inset; Z-INDEX: 1; OVERFLOW: auto; HEIGHT: 300px; width: 490px"> </div> </BODY> </HTML>

Further additional information
Part of Employees.xml ________________________________________________ <?xml version="1.0"?> <Employees> <Employee id="ABC0001"> <Name> <First_Name>Pandu</First_Name> <Middle_Name></Middle_Name> <Last_Name>Rao</Last_Name> </Name> <Address> <Address1>South Street</Address1> <Address2>Apt# 88</Address2> <City>Washington</City> <State>NY</State> <Zip5>10009</Zip5> <Zip4>1234</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> <Employee id="ABC0002"> <Name> <First_Name>John</First_Name> <Middle_Name>F</Middle_Name> <Last_Name>Smith</Last_Name> </Name> <Address> <Address1>Abhaka Blvd.</Address1> <Address2>Creek Street</Address2> <City>New York</City> <State>NY</State> <Zip5>12567</Zip5> <Zip4>3456</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> <Employee id="ABC0003"> <Name> <First_Name>David</First_Name> <Middle_Name>A</Middle_Name> <Last_Name>Small</Last_Name> </Name> <Address> <Address1>Bahuia Blvd.</Address1> <Address2>Simson Valley</Address2> <City>Trenton</City> <State>NJ</State> <Zip5>13577</Zip5> <Zip4>2378</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> <Employee id="ABC0004"> <Name> <First_Name>Divid</First_Name> <Middle_Name>A</Middle_Name> <Last_Name>Small</Last_Name> </Name> <Address> <Address1>Bahuia Blvd.</Address1> <Address2>Simson Valley</Address2> <City>Trenton</City> <State>NJ</State> <Zip5>13577</Zip5> <Zip4>2378</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> <Employee id="ABC0004"> <Name> <First_Name>Dravid</First_Name> <Middle_Name>A</Middle_Name> <Last_Name>Small</Last_Name> </Name> <Address> <Address1>Bahuia Blvd.</Address1> <Address2>Simson Valley</Address2> <City>Trenton</City> <State>NJ</State> <Zip5>13577</Zip5> <Zip4>2378</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> <Employee id="ABC0005"> <Name> <First_Name>Zahir</First_Name> <Middle_Name>A</Middle_Name> <Last_Name>Shah</Last_Name> </Name> <Address> <Address1>Aahuia Blvd.</Address1> <Address2>Simson Valley</Address2> <City>Trenton</City> <State>NJ</State> <Zip5>13577</Zip5> <Zip4>2378</Zip4> <Country>USA</Country> </Address> <Department>IT</Department> </Employee> </Employees>

Rate this article on a scale of 1 to 10 (2 votes, average 5)

Your vote :

LAMP >>


Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:



	Recent Jobs An immediate job opportunity as a Biztal Software Developers Needed in Charlotte, Sr. Software Engineer - Analytics Immediate Mainframe openings for Chennai Immediate TANDEM-TAL openings for Chenna View all Jobs (Add yours) View all CV (Add yours)

	answering service efax swimming pool contractor reservationless conference calls water softener Teleconference Host Department NOLIMIT Web Hosting MSN sunglasses

	Partners Dream.In.Code dotNet Slackers dotNet Spider Your HTML Source VisualBuilder.com DevGuru Planet Source Code ZVON.ORG Web Design ASPAlliance XML Pitstop Scripts The Spot 4 SAP Bitshop Web Hosting

Email TopXML