用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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
从原生JavaScript到React深入理解
Jul 23 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
wxPython事件驱动实例详解
2014/09/28 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python gevent协程切换实现详解
2020/09/14 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
社会实践评语
2014/04/28 职场文书
记账会计岗位职责
2014/06/16 职场文书
英语教研活动总结
2014/07/02 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
消防验收申请报告
2015/05/15 职场文书
罗马假日观后感
2015/06/08 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python