tablesorter 的使用

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

1. 需要引入的资源

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

2.使用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 下载:https://pan.baidu.com/s/1hqwJpFQ