用jquery.sortElements实现table排序
项目中要实现table排序的功能。
网上有很多解决方案,很多都基于jQuery。
jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题。
DataTables,大小75KB,功能强大,带分页,搜索等功能。
还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。
最后我选择用sortElements,实现很简单:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sortElements.js"></script>
$(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;
});
});
});
<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>
相关推荐
-
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
找到函数: function getElementText(config, node) { var text = ""; if (!node) return ""; if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false; if (config.textExtraction == "simple") { if (config.s
-
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
但在这个模型中,由于不能利用这些控件,我们需要借助纯Javascript和html静态代码来实现,感觉好像挺麻烦的?其实呢......分页代码既然由Webservice接口服务端中间层处理好回传回来,那么我们的排序代码也可以这样的,只是在回传前进行排序就ok了,下面就分析一下. 看过上篇的文章,可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象 代码 复制代码 代码如下: List<TB_WEB_NZ_INVESTMENT> list = new List<T
-
jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="
-
针对后台列表table拖拽比较实用的jquery拖动排序
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>
-
jquery实现的table排序功能示例
本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co
-
jquery tablesorter.js 支持中文表格排序改进
代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p
-
jquery.tableSort.js表格排序插件使用方法详解
本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
-
jQuery排序插件tableSorter使用方法
本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下 1.先引两个js <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.tablesorter.min.js"
-
jquery中的sortable排序之后的保存状态的解决方法
当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js
-
jQuery实现带分组数据的Table表头排序实例分析
本文实例讲述了jQuery实现带分组数据的Table表头排序.分享给大家供大家参考,具体如下: 如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足"分组支持",贴在这里备份 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
-
jQuery表格排序组件-tablesorter使用示例
一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <
-
jquery实现的鼠标拖动排序Li或Table
1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
-
通过jquery-ui中的sortable来实现拖拽排序的简单实例
1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s
随机推荐
- 第三方网站微信登录java代码实现
- 程序迁移到swift 3.0的一些实用技巧
- JavaScript实现给按钮加上双重动作的方法
- JavaScript实现多栏目切换效果
- PHP Static延迟静态绑定用法分析
- JAVA实现读取txt文件内容的方法
- 与MSSQL对比学习MYSQL的心得(七)--查询
- Node.js项目中调用JavaScript的EJS模板库的方法
- java POI解析Excel 之数据转换公用方法(推荐)
- JavaWeb实现文件上传与下载实例详解
- 实例分析Try {} Catch{} 作用
- Linux系统安装NoSQL(MongoDB和Redis)步骤及问题解决办法(总结篇)
- Linux Shell脚本编程初体验
- 在php和MySql中计算时间差的方法
- 让MySQL数据库跑的更快 为数据减肥
- js实现ifram取父窗口URL地址的方法
- 详解ES6中的let命令
- Kerberos安装教程及使用详解
- 浅谈springioc实例化bean的三个方法
- 详解PHP的Yii框架中的Controller控制器