您的位置:首页 > Web前端 > JQuery

jQuery表格排序组件-tablesorter

2010-03-17 14:42 549 查看
一个jquery表格排序插件-tablesorter

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

使用比较方便,如下:

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

表格代码
注意:表格要用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>

设置表格可排序
$(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的源代码。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: