<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>sort table</title>
<style type= "Text/css" >
A
Color: #000000;
Font-weight:bold;
Text-decoration:none;
}
</style>
<script src= "Sorttable.js" ></SCRIPT>
<body>
<p> Click Title Sort </p>
<table width= "481" border= "1" cellpadding= "0" cellspacing= "3" id= "MyTable" class= "sortable" >
<tbody>
<tr>
<th width= "165" >Name</th>
<th width= ">Salary</th>"
<th width= "align=" center ">Extension</th>
<th width= "" align= "center" >start date</th>
</tr>
<tr>
<td>bloggs, fred</td>
<td>$12000.00</td>
<TD align= "center" >1353</td>
<TD align= "center" >18/08/2003</td>
</tr>
<tr>
<td>turvey, kevin</td>
<td>$191200.00</td>
<TD align= "center" >2342</td>
<TD align= "center" >02/05/1979</td>
</tr>
<tr>
<td>mbogo, arnold</td>
<td>$32010.12</td>
<TD align= "center" >2755</td>
<TD align= "center" >09/08/1998</td>
</tr>
<tr>
<td>shakespeare, bill</td>
<td>$122000.00</td>
<TD align= "center" >3211</td>
<TD align= "center" >12/11/1961</td>
</tr>
<tr>
<td>shakespeare, hamnet</td>
<td>$9000</td>
<TD align= "center" >9005</td>
<TD align= "center" >01/01/2002</td>
</tr>
<tr>
<td>fitz, marvin</td>
<td>$3300</td>
<TD align= "center" >5554</td>
<TD align= "center" >22/05/1995</td>
</tr>
</tbody>
</table>
<p><a href= "Http://www.flaspx.com/weblog" target= "_blank" >alpha ' s blog</a></p>
</body>
Copy Code code as follows:
addevent (window, "load", sortables_init);
var Sort_column_index;
function sortables_init () {
//Find all tables with class sortable and make them sortable
if (!document.getelementsbytagname) return;
TBLs = document.getelementsbytagname ("table");
for (ti=0;ti<tbls.length;ti++) {
thistbl = Tbls[ti];
if ((' +thistbl.classname+ '). IndexOf ("sortable")!=-1) && (thistbl.id)) {
//inittable (thistbl.id);
ts_makesortable (THISTBL);
}
}
}
function ts_makesortable (table) {
if (table.rows && Table.rows.length > 0) {
var firstrow = table.rows[0];
}
if (!firstrow) return;
//We have a row:assume it's header, and make its contents clickable links
&nbs p; for (Var i=0;i<firstrow.cells.length;i++) {
var cell = Firstrow.cells[i];
var txt = ts_getinnertext (cell);
cell.innerhtml = ' <a href= "#" class= "Sortheader" ' +
' onclick= ' ts_resorttable (this, ' +i+ '); > ' +
txt+ ' <span class= ' sortarrow ' ></span></a> ' ;
}
}
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,clid) {
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 = Clid | | 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;
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 = ' ↑ ';
Newrows.reverse ();
Span.setattribute (' Sortdir ', ' up ');
} else {
ARROW = ' ↓ ';
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
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 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 = ';
}
}
}
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 Uppe Rcase
Return el;
Else
Return GetParent (El.parentnode, ptagname);
}
function Ts_sort_date (a,b) {
Y2K Notes:two digit years less than are treated as 20XX, greater than m 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) <) {yr = ' +yr;} else {yr = ' ' +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) <) {yr = ' +yr;} else {yr = ' ' +yr;}
DT2 = Yr+bb.substr (3,2) +bb.substr (0,2);
}
if (DT1==DT2) return 0;
if (DT1<DT2) return-1;
return 1;
}
function Ts_sort_currency (a,b) {
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) {
AA = parsefloat (Ts_getinnertext (A.cells[sort_column_index));
if (isNaN (aa)) AA = 0;
bb = parsefloat (Ts_getinnertext (B.cells[sort_column_index));
if (isNaN (bb)) BB = 0;
return AA-BB;
}
function Ts_sort_caseinsensitive (a,b) {
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) {
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 to be removed");
}
}