jquery.tablesorter.js 學習筆記

jquery.tablesorter.js

　　一般情況下，表格數據的排序方式有兩種，第一種是讓后端服務將排序后的數據直接輸出，另外一種方式就是使用客戶端排序，而jquery.tablesorter.js可以滿足此需求

實現效果圖如下

　　

1.官方地址
     jquery.tablesorter.js

 

2. HTML 結構

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[e-mail]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[e-mail]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[e-mail]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[e-mail]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

 

3. 需要引入的資源

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

 

4. 使用demo

$(document).ready(function() 
   
    // demo1 : 初始化，使表格可排序 
    $("#myTable").tablesorter(); 

    // demo1 : 默認第一列，第二列按升序排序 
    $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 


    // demo3 : 手動觸發排序
    $("myTable").trigger("sorton",[[0,0],[2,0]]);

    // demo4 : 禁止列排序
    $("table").tablesorter({ 
        headers: { 
            // 列序號默認從0開始
            1: { 
                // 第二列不可排序 
                sorter: false 
            }, 
            2: { 
                sorter: false 
            } 
        } ,
        // 啟用調試模式
        debug: true 
    }); 

    // demo5 : 強制默認排序列
    $("table").tablesorter({ 
        // set forced sort on the fourth column and i decending order. 
        sortForce: [[0,0]] 
    }); 

    // demo6 : 改變多條件排序使用的輔助鍵，默認shift
    $("table").tablesorter({ 
        sortMultiSortKey: 'altKey' ,
        textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
        } 
    }); 


    // demo7 : 給table 添加元數據也可達到排序的目的，metadata插件會自動獲取類屬性
    <table cellspacing="1" class="tablesorter {sortlist: [[0,0],[4,0]]}"> 

    // demo8 : 也可以在th的class中指定排序
    <tr> 
        <th class="{sorter: false}">first name</th> 
        <th>last name</th> 
        <th>age</th> 
        <th>total</th> 
        <!-- 指定數據解析類型 -->
        <th class="{sorter: 'text'}">first name</th> 
        <th class="{sorter: false}">discount</th> 
        <th>date</th> 
    </tr> 

    // demo9 : 指定sort相關事件
    $("table").bind("sortStart",function() { 
        $("#overlay").show(); 
    }).bind("sortEnd",function() { 
        $("#overlay").hide(); 
    }); 

    // demo10 : 動態添加數據
    $("table tbody").append(html); 
    // 通知插件需要更新 
    $("table").trigger("update"); 
    var sorting = [[2,1],[0,0]]; 
    // 觸發排序事件
    $("table").trigger("sorton",[sorting]); 

    // demo11 : 修改默認參數
    $.tablesorter.defaults.sortList = [[0,0]]; 

    // demo12 : 自定義排序類型
    $.tablesorter.addParser({ 
        // set a unique id 
        id: 'grades', 
        is: function(s) { 
            // return false so this parser is not auto detected 
            return false; 
        }, 
        format: function(s) { 
            // format your data for normalization 
            return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); 
        }, 
        // set type, either numeric or text 
        type: 'numeric' 
    }); 
     
    $(function() { 
        $("table").tablesorter({ 
            headers: { 
                6: { 
                    sorter:'grades' 
                } 
            } 
        }); 
    }); 


    // demo14 : 自定義組件
    $.tablesorter.addWidget({ 
        // give the widget a id 
        id: "repeatHeaders", 
        // format is called when the on init and when a sorting has finished 
        format: function(table) { 
            // cache and collect all TH headers 
            if(!this.headers) { 
                var h = this.headers = [];  
                $("thead th",table).each(function() { 
                    h.push( 
                        "" + $(this).text() + "" 
                    ); 
                     
                }); 
            } 
             
            // remove appended headers by classname. 
            $("tr.repated-header",table).remove(); 
             
            // loop all tr elements and insert a copy of the "headers"     
            for(var i=0; i < table.tBodies[0].rows.length; i++) { 
                // insert a copy of the table head every 10th row 
                if((i%5) == 4) { 
                    $("tbody tr:eq(" + i + ")",table).before( 
                        $("").html(this.headers.join("")) 
                     
                    );     
                } 
            } 
        } 
    }); 
     
    // demo15 : 調用插件call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders" 
    $("table").tablesorter({ 
        widgets: ['zebra','repeatHeaders'] 
    });         

); 

 

5. 注意事項

　　依賴項:jquery

　　meta數據插件:  jQuery Metadata 2.1

　　分頁插件：jQuery.tablesorter.pager.js

　　css,image 在blue skin 文件夾中可以找到

　　Demo 下載