As it says in the comments, the headers need to be a little simpler (this sort fn does not support rowspan) .... but it's not hard to lay them out so that they look the same as before but all the sort "buttons" on the second line.
The sorting does not provide special handling for dates. It treats them as strings, so to get a valid sort, always show dates as YYYY-MM-DD
This does not show the hourglass cursor while sorting... did you know that just setting that up was taking several seconds? But this does display a message in the statusbar and the cursor does stay as a hand.... indicating that something is happening.
I also forgot to put a check for IE 5+. It needs to be at the start of the
SetupForSortingTable
function.
-- Dan
Main Topics
Browse All Topics
by: DanRollinsPosted on 2003-06-06 at 03:19:06ID: 8664784
// file: DanSortTbl.js
//
// notes to ameba:
// Put the following in the HTML page that has the table:
//
// <script src="DanSortTbl.js">
// </script>
//
// </head>
// <body bgcolor="#e8f0f8" onLoad='SetupForSortingTab
//
// This expects a 'simple' two-row header (sort key on the second row) -- RowSpan is not supported.
// so a minor tweek is needed to your header defs:
//
// <tr bgcolor="#cccccc" class=hdr>
// <td  </td>
// <td colspan=3 align="center" >Position</td>
// <td align="center" colspan=4>Points</td>
// <td colspan=2>Questions</td>
// <td colspan=4> </td>
// </tr>
// <tr bgcolor="#cccccc" class=hdr>
// <td align="center"><b>Expert</
// <td><b>05/19</b></td>
// <td><b>06/04</b></td>
// <td> </td>
// <td align="center"><b>05/19</b
// <td align="center"><b>06/04</b
// <td align="center"><b>Change</
// <td align="center"><b>This mth</b></td>
// <td><b>Answ.</b></td>
// <td><b>Asked</b></td>
// <td><b>Comments</b></td>
// <td><b>CPA</b></td>
// <td><b>PPA</b></td>
// <td><b>Reg.Date</b></td>
// </tr>
//
// The following is not ncessary, but right-aligning most values in the table
// will look better, In testing, I added these to your styles:
// td {text-align:right}
// td.lj {text-align:left}
// then modified the Expert link cells as:
// <td class=lj><a href="http://www.exper... etc
//
//////////////////////////
// start of 'snap-in' sort module
//
var clrSelected= "blue";
var clrDefault= "black";
var sEventSetup= "onMouseOver='SetColor(thi
var ganSortOrders;
var goTheTable;
var gnKeyHdrRow= 0;
var gnFirstDataRow= 1;
var gnSortDir; // set before sorting: -1= desc, 1=asc
var gnSortClm;
var goLastHdrClicked;
function SetupForSortingTable( objId, nHdrRows )
{
if ( !isNaN(nHdrRows) ) { // optional argument
gnKeyHdrRow= nHdrRows-1; // save as global
}
var oTbl;
if (objId.tagName == "TABLE") {
oTbl= objId; // passed in an object rather than an ID, OK, that's fine
}
else {
oTbl= document.getElementById(ob
}
gnFirstDataRow= gnKeyHdrRow+1;
var nClms=oTbl.rows[gnFirstDat
for (j=0; j<nClms; j++ ) {
var sInnerHTML= oTbl.rows[gnKeyHdrRow].cel
var sNewInnerHTML= "<SPAN "+sEventSetup+ ">"+sInnerHTML+"</SPAN>";
sNewInnerHTML= sNewInnerHTML.replace( "{1}", ""+j );
oTbl.rows[gnKeyHdrRow].cel
}
//------------------------
ganSortOrders= new Array();
for (j=0; j<nClms; j++ ) {
ganSortOrders[j]= 0; // assume unsorted. Will toggle to decending, then asscending
}
//------------------------
gaDataRows= new Array();
var nTblRows= oTbl.rows.length;
for (j= gnFirstDataRow; j< nTblRows; j++ ) {
gaDataRows[j-gnFirstDataRo
}
goTheTable= oTbl;
}
//------------------------
// handles mouseOver and mouseOut
//
function SetColor(obj, fSelected )
{
if ( fSelected ) {
obj.style.color= clrSelected;
obj.style.cursor='hand';
goLastHdrClicked= obj;
window.status= "Click to sort by this column";
return;
}
else {
// Restoring original color
obj.style.color= clrDefault;
obj.style.cursor='auto';
window.status="";
}
}
//------------------------
function StartSortTable( nSortClm )
{
window.status= "Sorting. Please wait...";
gnSortClm= nSortClm;
setTimeout( "DoSortTable();", 10 ); // maybe need some events to pump...
}
//------------------------
function DoSortTable()
{
if (ganSortOrders[gnSortClm]=
else ganSortOrders[gnSortClm]= -ganSortOrders[gnSortClm];
gnSortDir= ganSortOrders[gnSortClm];
//------------------------
gaDataRows.sort( CompareRows );
var nClms= goTheTable.rows[gnFirstDat
//------------------------
oTblNew= document.createElement("TA
for (j=0; j< gaDataRows.length; j++ ) {
var oRow= oTblNew.insertRow();
for (k=0; k<nClms; k++ ) {
var oCell= oRow.insertCell();
oCell.innerHTML= gaDataRows[j].cells[k].inn
}
}
//------------------------
for (j=0; j< oTblNew.rows.length; j++ ) {
for (k=0; k<nClms; k++ ) {
goTheTable.rows[j+gnFirstD
}
}
oTblNew= null;
SetColor(goLastHdrClicked,
window.status= "";
}
// return -1 if r1<r2
// +1 if r1>r2
//
function CompareRows( r1, r2 )
{
var cellDatum1= r1.cells[gnSortClm].innerT
var cellDatum2= r2.cells[gnSortClm].innerT
if ( !isNaN(cellDatum1) && !isNaN(cellDatum1) ){
cellDatum1 = parseFloat(cellDatum1);
cellDatum2 = parseFloat(cellDatum2);
}
if (gnSortDir == 1 ) {
if ( cellDatum1 < cellDatum2 ) return(-1);
if ( cellDatum1 > cellDatum2 ) return(1);
}
else {
if ( cellDatum1 > cellDatum2 ) return(-1);
if ( cellDatum1 < cellDatum2 ) return(1);
}
return(0);
}