用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 实现完美include载入实现代码
Aug 05 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
Vue生命周期示例详解
Apr 12 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
js实现购物车功能
Jun 12 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
leaflet加载geojson叠加显示功能代码
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 正则 过滤html 的超链接
2009/06/02 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
jquery 图片轮换效果
2010/07/29 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python实现百万答题自动百度搜索答案
2018/01/16 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python之pymysql的使用小结
2019/07/01 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
终端业务员岗位职责
2013/11/27 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang