Tablesorter是一个JQuery插件，功能是对标准的table进行排序，很简单，只要一句JS代码就能实现点击表头排序的功能，但也很强大，通过设置也能实现表头锁定，Ajax加载数据，分页，主题，复杂表头，表格嵌套等等功能，官方的API头都可以给你看大?。

简单开始

引用JS文件

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script>

构造标准的表格

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

对表格应用Tablesorter

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

到此你的表格就已经被赋予了排序功能，排序点击表头即可~
tablesorter.jpg

没看错，默认的表格就是这么丑，不过Tablesorter支持主题，往下看
引用主题css文件

<link rel="stylesheet" href="theme.dropbox.css">

注册主题

$("#myTable").tablesorter({
    theme:"dropbox"
});

tablesorter1.jpg

瞬间回到现代，这是个dropbox风格主题。

- 阅读剩余部分 -

1