用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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 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数字格式化
2006/12/06 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python的pygame安装教程详解
2020/02/10 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
MySQL面试题
2014/01/12 面试题
银行求职自荐书
2014/06/25 职场文书
档案管理员岗位职责
2015/02/12 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
golang中的空slice案例
2021/04/27 Golang
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP