JS HTML TABLE 排序
介绍一个非常使用的 table 排序 JS
// 排序 tableId: 表的id;iCol: 第几列;dataType：iCol对应的列显示数据的数据类型，神奇的排序 JS 插件
// 使用该 js 前提 , 所有的数据类型 即 dataType 一定要正确， iCol是从 0 开始的这点需要注意 , 另外排序行一定要是 thead , 数据一定要使用 tbody
// dataType 可用来扩展支持各种类型数据
// 因为是使用 tbody 来获得数据的，所以数据一定要放在 tbody 中
function sortAble(tableId, iCol, dataType) {
var table = document.getElementById(tableId);
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) {
//alert("同列");
aTrs.reverse();
} else {
// 如果不是同一列，使用数组的sort方法，传进排序函数
aTrs.sort(compareEle(iCol, dataType));
}
// 创建文档碎片便于页面优化，这样不需要每一次进行 DOM 操作就刷新一次页面 ... 把所有需要添加的内容追加到文档碎片
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
// 记录最后一次排序的列索引
table.sortCol = iCol;
}
// 将列的类型转化成相应的可以排列的数据类型,里面可以自由进行添加自己想要用来排序的特殊类型，比如这里我就使用了带有特殊符号的数据
function convert(sValue, dataType) {
var temp = "";
switch(dataType) {
case "int":
if (sValue == "-") {
temp = "10000";
} else if (sValue.indexOf("↑") > 0) {
temp = sValue.substr(0, sValue.indexOf("↑"));
} else if (sValue.indexOf("↓") > 0) {
temp = sValue.substr(0, sValue.indexOf("↓"));
} else {
temp = sValue;
}
return parseInt(temp);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
// 添加 rankChange compare 对于 排名上升下降做了可排序处理
case "rankChange":
if (sValue.indexOf("↑") >= 0){
temp = sValue.substr(sValue.indexOf("↑") + 1,sValue.length);
}else if (sValue.indexOf("↓") >= 0){
temp = '-' + sValue.substr(sValue.indexOf("↓") + 1,sValue.length);
}else {
//donothing
}
return parseInt(temp);
default:
return sValue.toString();
}
}
// 排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function ieOrFireFox(ob) {
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
// 排序 tableId: 表的id;iCol: 第几列;dataType：iCol对应的列显示数据的数据类型
// 使用该 js 前提 , 所有的数据类型 即 dataType 一定要正确， iCol是从 0 开始的这点需要注意 , 另外排序行一定要是 thead , 数据一定要使用 tbody
// dataType 可用来扩展支持各种类型数据
// 因为是使用 tbody 来获得数据的，所以数据一定要放在 tbody 中
function sortAble(tableId, iCol, dataType) {
var table = document.getElementById(tableId);
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));
}
// 创建文档碎片便于页面优化，这样不需要每一次进行 DOM 操作就刷新一次页面 ... 把所有需要添加的内容追加到文档碎片
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
// 记录最后一次排序的列索引
table.sortCol = iCol;
}
// 将列的类型转化成相应的可以排列的数据类型,里面可以自由进行添加自己想要用来排序的特殊类型，比如这里我就使用了带有特殊符号的数据
function convert(sValue, dataType) {
var temp = "";
switch(dataType) {
case "int":
if (sValue == "-") {
temp = "10000";
} else if (sValue.indexOf("↑") > 0) {
temp = sValue.substr(0, sValue.indexOf("↑"));
} else if (sValue.indexOf("↓") > 0) {
temp = sValue.substr(0, sValue.indexOf("↓"));
} else {
temp = sValue;
}
return parseInt(temp);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
// 添加 rankChange compare 对于 排名上升下降做了可排序处理
case "rankChange":
if (sValue.indexOf("↑") >= 0){
temp = sValue.substr(sValue.indexOf("↑") + 1,sValue.length);
}else if (sValue.indexOf("↓") >= 0){
temp = '-' + sValue.substr(sValue.indexOf("↓") + 1,sValue.length);
}else {
//donothing
}
return parseInt(temp);
default:
return sValue.toString();
}
}
// 排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function ieOrFireFox(ob) {
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
使用的话 html 的结构如下
<table id=”sortTable”>
<thead>
<tr><td id = “sortOne”> 排名 </td> <td id = “sortTwo”> 分数 </td></tr>
</thead>
<tbody>
<tr><td> 1 </td><td> 30 </td></tr>
…以下省略
</tbody>
<tfoot>
<!-- 这边留空也不要紧-->
</tfoot>
</ table>
使用的时候这里用到了 jquery 中的一些方法，假如大家不熟悉的话可以去看看 w3cschool ，不过使用 js 方法也是可以做到的。这里只介绍 jquery 的方法了。
首先获得需要排名的元素
$(“sortOne”).bind(“click”,function(){ sortAble(“sortTable”,”int”) ;});
这样传入需要排序的 table 名称和对应的列元素的 类型即可 …
这个排序完全是使用相关可操控的元素写成的哦。