用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 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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中文汉字验证码
2007/04/08 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python测试驱动开发实例
2014/10/08 Python
对python3新增的byte类型详解
2018/12/04 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python画微信表情符的实例代码
2019/10/09 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Python如何读取、写入JSON数据
2020/07/28 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
家居装修公司创业计划书范文
2014/03/20 职场文书
工程项目经理任命书
2014/06/05 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
拉贝日记观后感
2015/06/05 职场文书
八年级数学教学反思
2016/02/17 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers