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"}}});
为了明天能幸福,今天付出再多也不后悔。