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>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</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 下载