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响应 ...
随机推荐
- Linux下安装Mysql(RPM安装)
一.去官网下载本次安装须要的mysql版本号.我们须要安装的是5.1版本号的且centos系统是64位的.所下面载的是MySQL-community-5.1.73-1.rhel5.x86_64.rpm ...
- JAVA输出带BOM的UTF-8编码的文件
当从http 的response输出CSV文件的时候,设置为utf8的时候默认是不带bom的,可是windows的Excel是使用bom来确认utf8编码的,全部须要把bom写到文件的开头. 微软在 ...
- poj_1974,最长回文字串manacher
时间复杂度为O(n),参考:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 #include<iostrea ...
- DNS RR代码和含义
记录类型 代码 号码 定义的 RFC 描述 功能 A 1 RFC 1035 IP 地址记录 传回一个 32 比特的 IPv4 地址,最常用于映射主机名称到 IP地址,但也用于DNSBL(RFC 110 ...
- 38.angular的scope作用域
转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...
- django 笔记5 外键 ForeignKey
class UsserGroup(models.Model): uid = models.AutoField(primary_key=True) caption = models.CharField( ...
- windows, fast-rcnn CPU版本的安装配置
一:安装准备 1:caffe的安装配置,本人用的是happynear大神的caffe版本,具体链接https://github.com/happynear/caffe-windows,编译时需要用到p ...
- C#版清晰易懂TCP通信原理解析(附demo)
[转] C#版清晰易懂TCP通信原理解析(附demo) (点击上方蓝字,可快速关注我们) 来源:周见智 cnblogs.com/xiaozhi_5638/p/4244797.html 对.NET中网络 ...
- POJ——T 1470 Closest Common Ancestors
http://poj.org/problem?id=1470 Time Limit: 2000MS Memory Limit: 10000K Total Submissions: 20830 ...
- 一、 Hbase特性 3v特性,Volume(量级) Varity(种类) Velocity(速度)
HBase中表的特点 大: 一个表可以由百亿行,上百万列(列多时,插入变慢) 面向列:面向列(族)的存储和权限控制,列(族)独立检索 稀疏:对于为空(null) 的列,并不占用存储空间,因此表可以设计 ...