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>[email protected]</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>[email protected]</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>[email protected]</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>[email protected]</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 下载