sortElements实现table排序步骤详解

这次给大家带来sortElements实现table排序步骤详解，sortElements实现table排序的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery.tablesorter，大小17KB，不过他的首页在ie10下兼容性有点问题。 

DataTables，大小75KB，功能强大，带分页，搜索等功能。
还有插件叫sortElements，很小巧，只有3KB，兼容性也不错，而且在Github上有818个星。
最后我选择用sortElements，实现很简单：
1. 引入jQuery

登录后复制

2. 引入sortElements.js

登录后复制

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

登录后复制  

Facility name

 

Phone #

 

City

 

Speciality

   CCC 00001111 Amsterdam GGG  

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jquery实现表格排序+实时搜索功能

jQuery做出圆形图标菜单轮流切换功能

以上就是sortElements实现table排序步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！