前言
tablesorter是一个可以支持table排序用的插件,只需简单的引入tablesorter.js及其自带的主题样式或自定义的样式,即可支持表格的排序。我们可以很方便的控制在哪些列上加入排序功能,并且tablesorter也支持自定义排序规则,当然jquery插件使用的前提是必须引入jquery.js,并且要放在tablesorter.js引入之前,下面将简单的介绍tablesorter的使用。
具体使用
- 到官网下载资源包__jquery.tablesorter.zip
在html页面中引入jquery.js和tablesorter.js脚本文件
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tablesorter.js"></script>必须含thead和tbody的table
<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>document加载的时候排序table
$(document).ready(function(){
$("#myTable").tablesorter();
});效果图