用jquery.sortElements实现table排序

项目中要实现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>

赞 (0)

相关推荐

  • jQuery实现带分组数据的Table表头排序实例分析

    jQuery实现带分组数据的Table表头排序实例分析

    本文实例讲述了jQuery实现带分组数据的Table表头排序.分享给大家供大家参考,具体如下: 如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足"分组支持",贴在这里备份 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • 修复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.tableSort.js表格排序插件使用方法详解

    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-ui中的sortable来实现拖拽排序的简单实例

    通过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

  • 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 html表格排序插件tablesorter使用方法详解

    tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="

  • jquery tablesorter.js 支持中文表格排序改进

    代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p

  • jQuery表格排序组件-tablesorter使用示例

    jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

  • JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    但在这个模型中,由于不能利用这些控件,我们需要借助纯Javascript和html静态代码来实现,感觉好像挺麻烦的?其实呢......分页代码既然由Webservice接口服务端中间层处理好回传回来,那么我们的排序代码也可以这样的,只是在回传前进行排序就ok了,下面就分析一下. 看过上篇的文章,可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象 代码 复制代码 代码如下: List<TB_WEB_NZ_INVESTMENT> list = new List<T

  • 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实现的table排序功能示例

    jquery实现的table排序功能示例

    本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co

  • jquery中的sortable排序之后的保存状态的解决方法

    当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js

  • 针对后台列表table拖拽比较实用的jquery拖动排序

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>

随机推荐