项目中要实现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)的更多相关文章

  1. js实现table排序-sortable.js

    方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...

  2. 用js实现table内容从下到上连续滚动

    网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...

  3. javascript table排序之jquery.tablesorter.js

    table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...

  4. 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 ...

  5. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  6. jQuery下通过$.browser来判断浏览器

    使用方法: $.browser.['浏览器关键字'] 代码如下: $(function() { if($.browser.msie) { alert("this is msie") ...

  7. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  8. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  9. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

随机推荐

  1. Linux下安装Mysql(RPM安装)

    一.去官网下载本次安装须要的mysql版本号.我们须要安装的是5.1版本号的且centos系统是64位的.所下面载的是MySQL-community-5.1.73-1.rhel5.x86_64.rpm ...

  2. JAVA输出带BOM的UTF-8编码的文件

    当从http 的response输出CSV文件的时候,设置为utf8的时候默认是不带bom的,可是windows的Excel是使用bom来确认utf8编码的,全部须要把bom写到文件的开头. 微软在 ...

  3. poj_1974,最长回文字串manacher

    时间复杂度为O(n),参考:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 #include<iostrea ...

  4. DNS RR代码和含义

    记录类型 代码 号码 定义的 RFC 描述 功能 A 1 RFC 1035 IP 地址记录 传回一个 32 比特的 IPv4 地址,最常用于映射主机名称到 IP地址,但也用于DNSBL(RFC 110 ...

  5. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  6. django 笔记5 外键 ForeignKey

    class UsserGroup(models.Model): uid = models.AutoField(primary_key=True) caption = models.CharField( ...

  7. windows, fast-rcnn CPU版本的安装配置

    一:安装准备 1:caffe的安装配置,本人用的是happynear大神的caffe版本,具体链接https://github.com/happynear/caffe-windows,编译时需要用到p ...

  8. C#版清晰易懂TCP通信原理解析(附demo)

    [转] C#版清晰易懂TCP通信原理解析(附demo) (点击上方蓝字,可快速关注我们) 来源:周见智 cnblogs.com/xiaozhi_5638/p/4244797.html 对.NET中网络 ...

  9. POJ——T 1470 Closest Common Ancestors

    http://poj.org/problem?id=1470 Time Limit: 2000MS   Memory Limit: 10000K Total Submissions: 20830   ...

  10. 一、 Hbase特性 3v特性,Volume(量级) Varity(种类) Velocity(速度)

    HBase中表的特点 大: 一个表可以由百亿行,上百万列(列多时,插入变慢) 面向列:面向列(族)的存储和权限控制,列(族)独立检索 稀疏:对于为空(null) 的列,并不占用存储空间,因此表可以设计 ...