對於table表格排序，是開發中很長用到得技術。今天把客戶端排序完善了一下，它兼容數字、字符、日期、漢字、百分數等排序功能。
如下
對於數字類型列：
整型οnclick=sortTable('tableID',1,'int');
浮點型οnclick=sortTable('tableID',1,'int');
對於日期型列：
οnclick=sortTable('tableID',1,'date');
對於字符串型列：
如：οnclick=sortTable('tableID',1);
對於百分數的列（如：36%）：
如：sortTable('tableID',5,'float',1);
// 對table表格排序的處理TableSort.js 文件代碼如下：
//ie和FireFox的處理
function ieOrFireFox(obj)
{
if(obj.textContent != null)
{
return obj.textContent;
}
else
{
var s = obj.innerText;
return s.substring(0,s.length);
}
}
//對table排序。
//參數 ---tableId:表的id，iCol:列索引；dataType:iCol對應的列排序顯示數據的類型，removeRight:排序時去掉列的右邊的字符個數
function sortTable(tableId,iCol,dataType,removeRight)
{
var table = document.getElementById(tableId);
//給排序列標題改變顏色////////////////////
var thead = table.childNodes[0];
var tr = thead.childNodes[0];
var thNew = tr.childNodes[iCol];
if(table.sortCol != null)
{
var thOld = tr.childNodes[table.sortCol];
thOld.style.color="Black"
}
thNew.style.color="Blue"
///////////////////////////////////////////
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;//定義數組
//將得到的列放入數組，備用
for(var i = 0;i<colRows.length;i++)
{
aTrs[i] = colRows[i];
}
//判斷上一次排列和現在需要排列的是否同一個
if(table.sortCol == iCol)
{
aTrs.reverse();
}
else
{ //如果不是同一列，使用sort方法傳進排序函數
aTrs.sort(compareEle(iCol,dataType,removeRight));
}
var oFragment = document.createDocumentFragment();
for(var i =0;i<aTrs.length;i++)
{
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
table.sortCol = iCol;//記錄最後一次排序的列索引
}
//排序函數，iCol：列索引，dataType:列數據類型
function compareEle(iCol,dataType,removeRight)
{
return function(oTR1,oTR2)
{
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]),dataType,removeRight);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]),dataType,removeRight);
if(typeof(vValue1)=='string')
{ // 漢字排序單獨處理
return vValue1.localeCompare(vValue2);
}
else
{
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
}
};
}
//將列的類型轉換成相應的可以排序的數據類型
function convert(sValue,dataType,removeRight)
{
if(removeRight!=null)
{
var newLen = sValue.length - removeRight;
sValue=sValue.substr(0,newLen);
}
switch(dataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}