js实现table排序(jQuery下的jquery.sortElements)
项目中要实现table排序的功能。
网上有非常多解决方式,非常多都基于jQuery。
- jquery.tablesorter。大小17KB。只是他的首页在ie10下兼容性有点问题。
- DataTables,大小75KB。功能强大,带分页,搜索等功能。
- 还有插件叫sortElements,非常小巧。仅仅有3KB。兼容性也不错。并且在Github上有818个星。
最后我选择用sortElements,实现非常easy:
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>
实现效果:www.bishouyi.cn
(由padolsey开发,github地址为https://github.com/padolsey/jquery.fn/tree/master/sortElements)
參考:http://stackoverflow.com/questions/3160277/jquery-table-sort
js实现table排序(jQuery下的jquery.sortElements)的更多相关文章
- js实现table排序-sortable.js
方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...
- 用js实现table内容从下到上连续滚动
网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...
- javascript table排序之jquery.tablesorter.js
table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...
- chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jQuery下通过$.browser来判断浏览器
使用方法: $.browser.['浏览器关键字'] 代码如下: $(function() { if($.browser.msie) { alert("this is msie") ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
随机推荐
- 疯狂java讲义之数据类型与运算符
Java是一门强类型语言 所有变量必须先声明.后使用 指定类型的变量只能接受类型匹配的值 注释 @author 作者 @version 版本 @param 方法参数 @return 返回值 标识符与关 ...
- Clion远程开发
2018.3 开始Clion可以支持远程开发了 官网教程如下: https://www.jetbrains.com/help/clion/remote-projects-support.html ...
- Filenames and paths
Files are organized into directories (also called ‘folders’). Every running program has a ‘current d ...
- Struts2的struts.xml的标准配置文档
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...
- [ Java ] [ Eclipse ] content Auto activation triggers
重點: That plug-in is not necessary any more. Just go to Preferences > Java > Editor > Conten ...
- 51Nod 不重叠的线段(贪心)
X轴上有N条线段,每条线段有1个起点S和终点E.最多能够选出多少条互不重叠的线段.(注:起点或终点重叠,不算重叠). 例如:[1 5][2 3][3 6],可以选[2 3][3 6],这2条线段互不重 ...
- 仿函数(functor)
仿函数(functor),就是使一个类的使用看上去像一个函数.其实现就是类中实现一个operator(),这个类就有了类似函数的行为,就是一个仿函数类了. In computer programmin ...
- [译] 我最终是怎么玩转了 Vue 的作用域插槽
原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...
- vue项目的环境变量
关于项目中环境变量的总结 背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名.webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量 在工 ...
- 数据库Flashback学习
最近更新时间:2018/12/18 适用场景 数据库升级.快速构建测试环境.DG中重建主库 前置条件 1. ARCHIVELOG 模式 数据库为 mount 状态下开启,最好指定archive log ...