jQuery表格排序组件-tablesorter

一个jquery表格排序插件-tablesorter

这个插件支持许多配置参数,如表头排序样式,初始排序设置,多列排序设置等。

使用比较方便,如下:

  1. 添加js引用
    <script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 
  2. 表格代码
    注意:表格要用thead/th和tbody。如:
    <table id="myTable"> 
    <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> 
    </body>
    <table>
  3. 设置表格可排序
    $(document).ready(function() 
        { 
            $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
        } 
    ); 

 更多说明请参考官方文档:http://tablesorter.com/docs/
 官方示例:http://tablesorter.com/docs/#Examples

 补充说明
我在使用过程遇到的一个问题,我需要用javascript动态删除表格中的行,当删除行后,重新排序会将已删除的行重新显示出来。解决这个问题可以在你删除行时触发"update"这个事件。代码如下:
$("#myTable").trigger("update");
关于update事件,请参考tablesorter的源代码。

posted @ 2010-03-17 14:42  s80895304  阅读(618)  评论(0编辑  收藏  举报