zoukankan      html  css  js  c++  java
  • 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"}}});

  • 相关阅读:
    Oracle11g 安装 -Linux
    oracle 11g安装-window
    将本地文件上传到github
    highcharts实现画辅助线功能并删除
    eclipse中一个项目引用另一个项目的方法
    Kubernetes label简单使用
    spark 报错 InvalidClassException: no valid constructor
    NFS服务配置 Linux
    Ubuntu-Server18.04开启无线网卡并配置静态ip
    Ubuntu18.04安装mysql并配置远程访问
  • 原文地址:https://www.cnblogs.com/zlp520/p/4639646.html
Copyright © 2011-2022 走看看