这次给大家带来sortelements实现table排序步骤详解，sortelements实现table排序的注意事项有哪些，下面就是实战案例，一起来看一下。
jquery.tablesorter，大小17kb，不过他的首页在ie10下兼容性有点问题。
datatables，大小75kb，功能强大，带分页，搜索等功能。
还有插件叫sortelements，很小巧，只有3kb，兼容性也不错，而且在github上有818个星。
最后我选择用sortelements，实现很简单：
1. 引入jquery
<script type="text/
javascript
" src="jquery.js"></script>
2. 引入sortelements.js
<script type="text/javascript" src="jquery.sortelements.js"></script>
3. js 代码
$(document).ready(function(){
var table = $('#mytable');//table的id
$('#sort_header')//要排序的headerid
.each(function(){
var th = $(this),
thindex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thindex;
}).sortelements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentnode;
});
inverse = !inverse;
});
});
});
4. html代码
<table id="mytable">
<tr>
<th id="sort_header">facility name</th>
<th>phone #</th>
<th id="city_header">city</th>
<th>speciality</th>
</tr>
<tr>
<td>ccc</td>
<td>00001111</td>
<td>amsterdam</td>
<td>ggg</td>
</tr>
</table>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery实现表格排序+实时搜索功能
jquery做出圆形图标菜单轮流切换功能
以上就是sortelements实现table排序步骤详解的详细内容。