jQuery插件 tablesorter 表格排序使用說明

時間 2019-11-10

標籤 jquery 插件 tablesorter 表格排序使用說明欄目 JQuery 简体版

原文原文鏈接

簡介

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

使用說明

引入jquery.tablesorter

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

修改表格

html以下：html

<table class="table table-striped table-bordered table-hover tablesorter" id="tbList">

注：爲table添加id和class，class必有tablesorter，id無關緊要.java

css: （詳見文章末尾詳細代碼）
定義表格樣式：表頭、升序、降序等樣式。jquery

排序實現

點擊表頭時，便可對其相應的列進行排序；
js代碼以下：git

<script type="text/javascript">
$("#tbList").tablesorter();
//無id時，能夠用 $(".tablesorter").tablesorter();
</script>

效果如圖：github

降序

升序

數據後帶有漢字

對於如圖所示的序號、年齡、進度等各種數字類型的數據，排序功能毫無差錯。
可是，對於如圖所示的課程數、時長、分數等數據後帶有漢字的數據，排序沒什麼效果，例以下圖：
降序：
bootstrap

升序：
瀏覽器

對於這種狀況，能夠作以下處理：
js代碼url

//自定義排序
 $.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"}}}); //表格第6、7、八列

時間格式：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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tablesorter</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/tablesorterStyle.css">
</head>

<body>
    <table class="table table-striped table-bordered table-hover tablesorter" id="tbList">
        <thead>
            <tr >
                <th width="8%"class="header">序號</th>
                <th width="15%"class="header">用戶名</th>
                <th width="11%"class="header">姓名</th>
                <th width="11%"class="header">性別</th>
                <th width="11%"class="header">年齡</th>
                <th width="11%"class="header">課程數</th>
                <th width="11%"class="header">時長</th>
                <th width="11%"class="header">分數</th>
                <th width="11%"class="header">進度</th>
            </tr>
        </thead>
        <tbody id="tbody-member-course-summary">
            <tr>
                <td>1</td>
                <td>111test1</td>
                 <td>華東區</td>
                <td>女</td>
                <td>23</td>               
                <td>20 門</td>
                <td>32 分</td>
                <!--<td>05小時32分47秒</td>-->
                <td>86 分</td>
                <td>79%</td>
            </tr>
            <tr>
                <td>2</td>
                <td>二</td>
                <td>李二梅</td>
                <td>男</td>
                <td>24</td>
                <td>4 門</td>
                <td>102 分</td>
                 <!--<td>03小時02分00秒</td>-->
                <td>68 分</td>
                <td>91%</td>
            </tr>
            <tr>
                <td>3</td>
                <td>zhaoliu</td>
                <td>趙六</td>
                <td>男</td>
                <td>30</td>
                <td>18 門</td>
                <td>57 分</td>
                 <!--<td>10小時57分00秒</td>-->
                <td>84 分</td>
                <td>37%</td>
            </tr>
             <tr>
                <td>4</td>
                <td>iii</td>
                <td>aiaia</td>
                <td>男</td>
                <td>20</td>
                <td>14 門</td>
                <td>92 分</td>
                <!--<td>00小時34分00秒</td>-->
                <td>79 分</td>
                <td>9%</td>
            </tr>
        </tbody>
        <tfoot id="tfoot-member-course-summary">
            <tr>
                <td>合計：</td>
                <td> -- 人</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td> -- 門</td>
                <td> -- </td>
                <td> -- </td>
                <td> -- %</td>
            </tr>
        </tfoot>
    </table>
    <script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
    <script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.min.js'></script>
    <!-- <script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.js'></script>-->
    <script type="text/javascript" src='js/mytablesorter.js'> </script>
</body>

</html>

css

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

js

// $("#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"}}}); //表格第七列