用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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
js有关元素内容操作小结
Dec 20 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python3多线程基础知识点
2019/02/19 Python
Python shelve模块实现解析
2019/08/28 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
python 获取计算机的网卡信息
2021/02/18 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
大学军训感言
2014/01/10 职场文书
个人实习生的自我评价
2014/02/16 职场文书
安全责任协议书
2014/04/21 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
会计专业求职信范文
2015/03/19 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
CSS基础详解
2021/10/16 HTML / CSS