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"}}});