用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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
原生js实现验证码功能
Mar 16 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 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/05 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python break语句详解
2014/03/11 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python+django实现文件下载
2016/01/17 Python
git进行版本控制心得详谈
2017/12/10 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python计算auc的方法
2020/09/09 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书