table利用js进行排序

发布时间:2017-04-21 浏览次数:2524 文章来源:个人博客

列表排序经常是通过后端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>

很简单,也好用。

key-word
排序 表格排序 tablesorter jq排序