<style>

/* sortable tables */
table.sortable a.sortheader {
background-color:#eee;
color:#666666;
font-weight: bold;
text-decoration: none;
display: block;
}
table.sortable span.sortarrow {
color: black;
text-decoration: none;
}
</style>

<script language="javascript">
//addevent(window, "load", sortables_init);
var sort_column_index;

function ts_getinnertext(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innertext) return el.innertext; //not needed but it is faster
var str = "";

var cs = el.childnodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodetype) {
case 1: //element_node
str += ts_getinnertext(cs[i]);
break;
case 3: //text_node
str += cs[i].nodevalue;
break;
}
}
return str;
}

function ts_resorttable(lnk,coltype)
{
// get the span
var span;
for (var ci=0;ci<lnk.childnodes.length;ci++) {
if (lnk.childnodes[ci].tagname && lnk.childnodes[ci].tagname.tolowercase()
== 'span') span = lnk.childnodes[ci];
}
var spantext = ts_getinnertext(span);
var td = lnk.parentnode;
var column = td.cellindex;
var table = getparent(td,'table');

// work out a type for the column

//if (table.rows.length <= 1) return;
//var itm = ts_getinnertext(table.rows[1].cells[column]);
//sortfn = ts_sort_caseinsensitive;
 //if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
//if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
//if (itm.match(/^[�$]/)) sortfn = ts_sort_currency;
//if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;

if (coltype == "numeric")
{
sortfn = ts_sort_numeric;
}
else if (coltype == "date")
{
sortfn = ts_sort_date;
}
else if (coltype == "currency")
{
sortfn = ts_sort_currency;
}
else
{
sortfn = ts_sort_caseinsensitive;
}

sort_column_index = column;
var firstrow = new array();
var newrows = new array();
for (i=0;i<table.rows[0].length;i++) { firstrow[i] = table.rows[0][i]; }
for (j=1;j<table.rows.length;j++) { newrows[j-1] = table.rows[j]; }

newrows.sort(sortfn);

if (span.getattribute("sortdir") == 'down') {
arrow = '&nbsp;&nbsp;&uarr;';
newrows.reverse();
span.setattribute('sortdir','up');
} else {
arrow = '&nbsp;&nbsp;&darr;';
span.setattribute('sortdir','down');
}

// we appendchild rows that already exist to the tbody, so it moves them

rather than creating new ones
// don't do sortbottom rows
for (i=0;i<newrows.length;i++) { if (!newrows[i].classname ||
(newrows[i].classname && (newrows[i].classname.indexof('sortbottom') == -1)))
table.tbodies[0].appendchild(newrows[i]);}
// do sortbottom rows only
for (i=0;i<newrows.length;i++) { if (newrows[i].classname &&
(newrows[i].classname.indexof('sortbottom') != -1))
table.tbodies[0].appendchild(newrows[i]);}

// delete any other arrows there may be showing

var allspans = document.getelementsbytagname("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].classname == 'sortarrow') {
if (getparent(allspans[ci],"table") == getparent(lnk,"table")) { // in
the same table as us?
allspans[ci].innerhtml = '&nbsp;&nbsp;&nbsp;';
 }
}
}

span.innerhtml = arrow;
}

function getparent(el, ptagname) {

if (el == null) return null;
else if (el.nodetype == 1 && el.tagname.tolowercase() ==
ptagname.tolowercase()) // gecko bug, supposed to be uppercase
return el;
else
return getparent(el.parentnode, ptagname);
}
function ts_sort_date(a,b) {
//window.alert("sort_date called");
// y2k notes: two digit years less than 50 are treated as 20xx, greater than
50 are treated as 19xx
aa = ts_getinnertext(a.cells[sort_column_index]);
bb = ts_getinnertext(b.cells[sort_column_index]);

// if (aa.length == 10) {
// dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
// } else {
// yr = aa.substr(6,2);
// if (parseint(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
// dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
// }
// if (bb.length == 10) {
// dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
// } else {
// yr = bb.substr(6,2);
// if (parseint(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
// dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
// }

dt1 = date.parse(aa);
dt2 = date.parse(bb);
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}

function ts_sort_currency(a,b)
{
//window.alert("sort_currency called");
aa = ts_getinnertext(a.cells[sort_column_index]).replace(/[^0-9.]/g,'');
bb = ts_getinnertext(b.cells[sort_column_index]).replace(/[^0-9.]/g,'');
return parsefloat(aa) - parsefloat(bb);
}

function ts_sort_numeric(a,b)
{
//window.alert("sort_numeric called");
aatemp = ts_getinnertext(a.cells[sort_column_index]);
aa = parsefloat(aatemp.replace(/,/gi,""));
if (isnan(aa)) aa = 0;
 bbtemp = ts_getinnertext(b.cells[sort_column_index]);
bb = parsefloat(bbtemp.replace(/,/gi,""));
if (isnan(bb)) bb = 0;
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}

function ts_sort_caseinsensitive(a,b)
{
//window.alert("sort_caseinsensitive called");
aa = ts_getinnertext(a.cells[sort_column_index]).tolowercase();
bb = ts_getinnertext(b.cells[sort_column_index]).tolowercase();
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}

function ts_sort_default(a,b)
{
//window.alert("sort_default called");
aa = ts_getinnertext(a.cells[sort_column_index]);
bb = ts_getinnertext(b.cells[sort_column_index]);
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}

function addevent(elm, evtype, fn, usecapture)

// addevent and removeevent
// cross-browser event handling for ie5+, ns6 and mozilla
// by scott andrew
{
if (elm.addeventlistener){
elm.addeventlistener(evtype, fn, usecapture);
return true;
} else if (elm.attachevent){
var r = elm.attachevent("on"+evtype, fn);
return r;
} else {
alert("handler could not be removed");
}
}

</script>

**************************************** end of the

function***************************
// now another html tag for calling the above function for numeric type column:
<a href="#" class="sortheader"
onclick="ts_resorttable(this,&quot;numeric&quot;);return false;">
// for non-numeric columns
<a href="#" class="sortheader"
onclick="ts_resorttable(this,&quot;text&quot;);return false;">
// this is to call the function for indication arrow mark in the coulmn header
down/up)
<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>