function ieOrFireFox(ob) {
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
function sortTableByColumn(sortTableId,iCol,dataType){
var sortTable = document.getElementById(sortTableId);
var tbody = sortTable.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
var sortedHeader = sortTable.tHead.rows[0].cells[iCol];
for (var i = 0; i < colRows.length; i++) {
aTrs[i] = colRows[i];
}
if (sortTable.sortCol == iCol) {
if (sortTable.sortOrder == "desc") {
aTrs.sort(compareEle(iCol, dataType,'asc'));
sortTable.sortOrder = "asc";
} else {
aTrs.sort(compareEle(iCol, dataType,'desc'));
sortTable.sortOrder = "desc";
}
} else {
aTrs.sort(compareEle(iCol, dataType,'asc'));
sortTable.sortOrder = "asc";
}
sortTable.sortCol = iCol;
var oFragment = document.createDocumentFragment();
for ( var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
}
function sortTable(tableId,thobj,dataType) {
var iCol = document.getElementById(thobj).cellIndex;
sortTableByColumn(tableId,iCol,dataType);
}
function convert(sValue, dataType,sortDerection) {
switch (dataType) {
case "int":
if(sValue.length <= 0){
if(sortDerection == "asc") {
sValue = "1000";
} else {
sValue = "-1";
}
}
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString().toLowerCase();
}
}
function compareEle(iCol, dataType,sortDerection) {
return function(oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType,sortDerection);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType,sortDerection);
var returnResult = 0;
if (vValue1 < vValue2) {
returnResult = -1;
} else if (vValue1 > vValue2) {
returnResult = 1;
} else {
returnResult = 0;
}
if(sortDerection == "desc"){
return -returnResult;
} else {
return returnResult;
}
};
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table Sort Example</title>
<script type="text/javascript" src="sortTable.js" > </script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTableByColumn('tblSort',0)" style="cursor:pointer">Last Name</th>
<th onclick="sortTableByColumn('tblSort',1,'date')" style="cursor:pointer">Date</th>
<th onclick="sortTableByColumn('tblSort',2,'float')" style="cursor:pointer">Salary</th>
<th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">Age</th>
<th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">ChineseName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>2008/9/20</td>
<td>100.03</td>
<td>20</td>
<td>我</td>
</tr>
<tr>
<td>Johnson</td>
<td>2008/10/4</td>
<td>200.8</td>
<td>18</td>
<td>爱</td>
</tr>
<tr>
<td>Henderson</td>
<td>2008/10/11</td>
<td>50.3</td>
<td>45</td>
<td>北</td>
</tr>
<tr>
<td>Williams</td>
<td>2008/10/08</td>
<td>50</td>
<td>20</td>
<td>京</td>
</tr>
<tr>
<td>Gilliam</td>
<td>2008/10/3</td>
<td>400.2</td>
<td>9</td>
<td>故</td>
</tr>
<tr>
<td>Walker</td>
<td>2008/11/4</td>
<td>20.6</td>
<td>20</td>
<td>宫</td>
</tr>
</tbody>
</table>
</body>
</html>
