table利用js进行排序

列表排序经常是通过后端sql进行排序的，但是如果数据量不大，不需要进行分页，是不是将排序放到前端做效率会比较高呢？

最近遇到一个需求，是将列表显示，但是不需要分页，只需要全部显示，用下拉进行查看，所以，这时候，列表排序放到前端做，会大大增加页面的效率。

所以，使用了jq的一个表格排序插件：

tablesorter

这个插件实现也很简单：

先引入js：

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

然后html建立内容：

<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> 
</tbody>
<table>

需要注意的地方：

要用thead,th和tbody这三个标识。

这样，就可以初始化js了

<script type="text/javascript">
$(document).ready(function() {
  $("#mytable").tablesorter();
});
</script>

很简单，也好用。