html排序类型,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的结构如下

排名 分数

1 30

…以下省略

table>

使用的时候这里用到了jquery中的一些方法，假如大家不熟悉的话可以去看看w3cschool，不过使用js方法也是可以做到的。这里只介绍jquery的方法了。

首先获得需要排名的元素

$(“sortOne”).bind(“click”,function(){ sortAble(“sortTable”,”int”) ;});

这样传入需要排序的table名称和对应的列元素的类型即可…

这个排序完全是使用相关可操控的元素写成的哦。