jQuery表格排序组件-tablesorter
一个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的源代码。