javascript table排序之jquery.tablesorter.js

table排序 jquery.tablesorter.js

一.Demo下载地址：

1.tablesorter.js下载地址：
http://download.csdn.net/detail/zhang1096646030/8890489
2.flexigrid.js下载地址：

二.修改：

1.支持中文排序，要做如下操作：

jquery.tablesorter.js中修改如下注释的两个函数：

//中文排序asc
function sortText(a,b) {
return a.localeCompare(b);
};
//中文排序desc
function sortTextDesc(a,b) {
return b.localeCompare(a);
};
/*
中文不能正确排序--废除
function sortText(a,b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};

function sortTextDesc(a,b) {
return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};
*/

2.ip排序不正确：（当你的排序不正确时，再修改，负责就不用改！）

ts.addParser({
id: "ipAddress",
is: function(s) {
return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
},
format: function(s) {

var a = s.split("."), r = "", l = a.length;
for(var i = 0; i < l; i++) {
var item = a[i];
if(item.length == 1) {
r += "00" + item;
}else if(item.length == 2) {
r += "0" + item;
} else {
r += item;
}
}
return $.tablesorter.formatInt(r);
},
type: "numeric"
});

/*
ip不能正常排序--废除
ts.addParser({
id: "ipAddress",
is: function(s) {
return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
},
format: function(s) {

var a = s.split("."), r = "", l = a.length;
for(var i = 0; i < l; i++) {
var item = a[i];
if(item.length == 2) {
r += "0" + item;
} else {
r += item;
}
}
return $.tablesorter.formatFloat(r);
},
type: "numeric"
});
*/

3.工作需要（状态、事件数及告警数）

/*
*工作需要扩展的，仅自己用！
*扩展排序函数
*/
//status排序
$.tablesorter.addParser({
id: "status", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
var str=0;
if(s.indexOf('<')!=-1){
str=0;
}else{
str=s.toLowerCase().replace(/在线/,1).replace(/离线/,2); //将中文换成数字
}
return str;
},
type: "numeric" //按数值排序
});

//num排序
$.tablesorter.addParser({
id: "num", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
var point=s.indexOf("</span>");
var str=s[point-1];
if(str.indexOf('>')!=-1){
str=-1;
}
return str;
},
type: "numeric" //按数值排序
});

三.调用：

flexme:表格id

0、1、2等：列的索引

ipAddress、status等：是以什么类型排序，比如：时间、金钱、中文,等。

调用只需这么一句：

静态放到：页面加载完函数中；

动态放到：动态返回数据完后，保证表格已经有了数据。（此时，也可以理解成静态了）

sorter:false 是指指定的列不排序

$("#flexme").tablesorter({headers:{0:{sorter:"ipAddress"},2:{sorter:"status"},3:{sorter:"num"},4:{sorter:"num"}}});