摘要：簡介是一個用來直接在瀏覽器上對表格數據進行排序的插件，無需再次刷新頁面，支持多種單元格數據類型，例如數值字符串日期和自定義排序。

Tablesorter 是一個用來直接在瀏覽器上對表格數據進行排序的jQuery插件，無需再次刷新頁面，支持多種單元格數據類型，例如數值、字符串、日期和自定義排序。

所用文件下載：
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert 文檔

html如下：

注：為table添加id和class，class必有tablesorter，id可有可無.
css: （詳見文章末尾詳細代碼）
定義表格樣式：表頭、升序、降序等樣式。
排序實現
點擊表頭時，即可對其相應的列進行排序；
js代碼如下：
效果如圖：
降序
升序
數據后帶有漢字
對于如圖所示的序號、年齡、進度等各類數字類型的數據，排序功能毫無差錯。
但是，對于如圖所示的課程數、時長、分數等數據后帶有漢字的數據，排序沒什么效果，例如下圖：
降序：               
升序：
對于這種情況，可以做如下處理：
js代碼
 //自定義排序
 $.tablesorter.addParser({  
     id: "num", //指定一個唯一的ID  
     is: function(s){  
         return false;  
         },  
     format: function(s){  
         return s.substring(0,s.length-2);//去除后面的漢字
         },  
         type: "numeric" //按數值排序  
     });  
 $("#tbList").tablesorter({headers:{5:{sorter:"num"}，6:{sorter:"num"},7:{sorter:"num"}}}); //表格第六、七、八列 
時間格式：xx時xx分xx秒
如上圖所示，顯然要按時間長短來排序，這種數據，比較麻煩。
對于這種情況，可以做如下處理：
js代碼
$.tablesorter.addParser({  
                id: "num", //指定一個唯一的ID  
                is: function(s){  
                   return false;  
                },  
                format: function(s){  
                    //對 xx時xx分xx秒 數據的處理
                   var hourNum= parseInt(s.substring(0,2));//xx時
                   var minuteNum= parseInt(s.substring(4,6));//xx分
                   var secondsNum= parseInt(s.substring(7,9));//xx秒 
                   //將時間換算為秒
                   var seconds=hourNum*3600+minuteNum*60+secondsNum;
                   return seconds;
                },  
                type: "numeric" //按數值排序  
                });  
        $(".tablesorter").tablesorter({headers:{6:{sorter:"num"}}});//表格第七列 
排序效果如圖：
降序
升序
更多處理情況，參見http://www.cnblogs.com/dwnblo...
代碼html




    
    
    
    



    

        

            

                
序號
                
用戶名
                
姓名
                
性別
                
年齡
                
課程數
                
時長
                
分數
                
進度
            
        
        

            

                
1
                
111test1
                 
華東區
                
女
                
23
               
                
20 門
                
32 分
                
                
86 分
                
79%
            
            

                
2
                
二
                
李二梅
                
男
                
24
                
4 門
                
102 分
                 
                
68 分
                
91%
            
            

                
3
                
zhaoliu
                
趙六
                
男
                
30
                
18 門
                
57 分
                 
                
84 分
                
37%
            
             

                
4
                
iii
                
aiaia
                
男
                
20
                
14 門
                
92 分
                
                
79 分
                
9%
            
        
        

            

                
合計：
                
 -- 人
                
 
                
 
                
 
                
 -- 門
                
 -- 
                
 -- 
                
 -- %
            
        
    
    
    
    
    

table.tablesorter{
    font-family: arial;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
/*表頭的樣式*/
thead{
background:#ccc;
color:#ff0000;
}
 .header{
    background-image: url("../plugin/tablesorter/themes/blue/bg.gif");
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
/*降序時樣式*/
th.headerSortDown{
 color:#00ff00;
 background-color: #aaa;
 background-image: url("../plugin/tablesorter/themes/blue/desc.gif");
 background-repeat: no-repeat;
 background-position: center right;
 cursor: pointer;
}

/*升序時樣式*/
th.headerSortUp{
 color:#0000ff;
  background-color: #aaa;
 background-image: url("../plugin/tablesorter/themes/blue/asc.gif");
 background-repeat: no-repeat;
 background-position: center right;
 cursor: pointer;
}

// $("#tbList").tablesorter();
//自定義排序
$.tablesorter.addParser({  
    id: "num", //指定一個唯一的ID  
    is: function(s){  
        return false;  
        },  
    format: function(s){  
    return s.substring(0,s.length-2);
        },  
    type: "numeric" //按數值排序  
        });  

$("#tbList").tablesorter({headers:{6:{sorter:"num"},7:{sorter:"num"},8:{sorter:"num"}}}); 
       
//    //自定義排序
//             $.tablesorter.addParser({  
//                 id: "num", //指定一個唯一的ID  
//                 is: function(s){  
//                    return false;  
//                 },  
//                 format: function(s){  
//                     //對xx時xx分xx秒 數據的處理
//                    var hourNum= parseInt(s.substring(0,2));//xx時
//                    var minuteNum= parseInt(s.substring(4,6));//xx分
//                    var secondsNum= parseInt(s.substring(7,9));//xx秒 
//                    //將時間換算為秒
//                    var seconds=hourNum*3600+minuteNum*60+secondsNum;
//                    return seconds;
//                 },  
//                 type: "numeric" //按數值排序  
//                 });  

//             $("#tbList").tablesorter({headers:{6:{sorter:"num"}}}); //表格第七列 

tablesorert 文檔

tableSorter使用介紹 http://www.cnblogs.com/dwnblo...

使用jquery的tablesorter插件進行表格排序 http://www.2cto.com/kf/201303...

jQuery表格排序插件 tablesorter http://www.oschina.net/p/tabl...