对于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();
}
}