jquery.tablesorter.js 学习笔记

jquery.tablesorter.js

　　一般情况下，表格数据的排序方式有两种，第一种是让后端服务将排序后的数据直接输出，另外一种方式就是使用客户端排序，而jquery.tablesorter.js可以满足此需求

实现效果图如下

aaarticlea/png;base64,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" alt="" />　　

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 下载