用纯Javascript实现的表格排序,在网上找的现成代码,放在博客中。
var k=0;
/**//**************************************************************************
排序的主方法,有三个形参,STableTd,iCol,sDataType分别为需要排序的表格ID,
需要排序的表格列号,所在列的数据类型(支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
var oTable=document.getElementById(sTableId);//获取表格的ID
var oTbody=oTable.tBodies[0]; //获取表格的tbody
var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
for(var i=1;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
{
aTRs.push(colDataRows[i]);
}
/**//***********************************************************************
sortCol属性是额外给table添加的属性,用于作顺反两种顺序排序时的判断,区分
首次排序和后面的有序反转
************************************************************************/
if(oTable.sortCol==iCol) //非首次排序
{
aTRs.reverse();
}
else //首次排序
{
if(k%2==0) //升序
{
aTRs.sort(generateCompareTRs(iCol,sDataType));
}
else if(k%2==1) //降序
{
aTRs.sort(generateCompareTRs1(iCol,sDataType));
}
}
var oFragment=document.createDocumentFragment(); //创建文档碎片
for(var i=0;i<aTRs.length;i++) //把排序过的aTRs数组成员依次添加到文档碎片
{
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
oTable.sortCol=iCol; //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};
//比较函数,用于两项之间的排序
//升序
function generateCompareTRs(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
//alert("vValue1="+oTR1.cells[iCol].firstChild.nodeValue);
//alert("vValue1="+oTR1.cells[iCol].firstChild.innerHTML);
if(oTR1.cells[iCol].firstChild.nodeValue){
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
}else{
var vValue1=convert(oTR1.cells[iCol].firstChild.innerHTML,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.innerHTML,sDataType);
}
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//降序
function generateCompareTRs1(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
if(oTR1.cells[iCol].firstChild.nodeValue){
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
}else{
var vValue1=convert(oTR1.cells[iCol].firstChild.innerHTML,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.innerHTML,sDataType);
}
if(vValue1>vValue2)
{
return -1;
}
else if(vValue1<vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//数据类型转换函数
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":return parseInt(sValue);
case "float": return parseFloat(sValue);
case "date":return new Date(Date.parse(sValue));
default: return sValue.toString();
}
};
Html代码,其中表格中数据由另外一个js代码实现。
<div class="title">物理设备使用统计表</div>
<div class="list">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="counttable">
<tr>
<th>物理设备UUID</th>
<th onClick="sortTable('counttable',1,'float');" style="cursor:pointer">使用容量(GB)</th>
<th onClick="sortTable('counttable',2,'float');" style="cursor:pointer">空闲容量(GB)</th>
<th onClick="sortTable('counttable',3,'float');" style="cursor:pointer">使用/总容量比</th>
<th onClick="sortTable('counttable',4,'float');" style="cursor:pointer">使用/空闲容量比</th>
</tr>
</table>
</div>
分享到:
相关推荐
JavaScript实现表格排序,按数字、日期、汉字排序!
JavaScript 表格排序双击可进行按表格列排序
使用JavaScript实现表格排序,点击表头切换升序降序,非常简单
绝对是好东西 如果你刚好找这方面的资料要实现点击表头就产生排序,绝对实用,物超所值 轻量级JavaScript表格内容排序代码 对生产的html进行排序,不需要与数据库交互,速度性能好
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
Javascript表格排序大全
使用javascript在客户端对表格进行排序的例子
利用javaScript技术实现表格排序
javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格
带箭头的javascript表格排序。直接使用源码
javascript表格排序案例(面向对象)案例资料
功能强大的javascript表格排序,可以设定排序规则,设定哪些列排序,哪些列不排序。运行速度快。两部操作就搞定,使用方便简单!解决服务器端数据库排序的压力!
javascript实现表格的单元格拖动排序,对实现图片的拖动排序有启发
javascript 表格排序多种数据类型排序(中文混合数字排序).zip
页面表格实现不刷新排序,通过javascript 来实现的。例子很简单,希望能有所帮助
javascript表格排序(顺序和逆序)并高亮显示,通过使用排序后。然所在的那一列进行高亮显示
内涵表格排序代码, 支持string number, 不支持date类型。
网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)