用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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
详解Vue router路由
Nov 20 Vue.js
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错误级别的设置方法
2013/06/17 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
党课学习思想汇报
2014/01/02 职场文书
幼儿园开学寄语
2014/04/03 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
python process模块的使用简介
2021/05/14 Python