用jquery.sortElements实现table排序


Posted in Javascript onMay 04, 2014

项目中要实现table排序的功能。

网上有很多解决方案,很多都基于jQuery。

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>
Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript动画算法实例分析
Jul 31 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 #Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 #Javascript
javascript实现2048游戏示例
May 04 #Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 #Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 #Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 #Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Python基于当前时间批量创建文件
2020/05/07 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Linux文件操作命令都有哪些
2016/07/23 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
优秀学生事迹材料
2014/02/08 职场文书
后进生评语大全
2015/01/04 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python