首页 web前端 js教程 基于jquery的表格排序_jquery

基于jquery的表格排序_jquery

May 16, 2016 pm 06:19 PM
表格排序

很多高手也位jquery写了专门的排序库,因为自己也想尝试一下,
当然运行速度实在不能接受,但是我会慢慢的把他改进的。
注:这里只是拿出了一部分代码来,查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.

5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为
sortStr();
它有两个参数:

复制代码 代码如下:

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;

}
else return aText.localeCompare(bText)
}
}


第一个是index,它是在click事件中获得的变量,这个变量包含了被点击的那个'th'的在文档中的位置是一个数字,
jquert的index()方法获得对象的位置,这个位置从0算起,这个例子中有6个'th';

第二个参数是dataType,他包含每个'th'的属性值。

sortStr()里面包含了一个比较的函数,这个函数是匿名函数,它有2个参数每个参数代表着一个'tbody tr',(在这里a和b代表需要比较的tr)这两个参数是在包含他的函数环境中获取的,sort()方法里面的参数,在这是一个函数,这个函数都会获得数组对象的元素,
这个匿名函数返回对操作数组的引用。
arr里面包含的一个数组,每个数组的值包含对tbody里面的tr的引用,排序函数按照返回的值对原有数组里面的元素直接进行位置的改变,

var aText=$(a).find('td:nth-child('+index+')').text();
获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值,
click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置;
复制代码 代码如下:

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}

如果需要排序的类型是不包含了数字和字母的话,(因为拥有roomType值的元素所包含了数字和字母),将获得的td里面的文本值和dataType传递到
Parse()里面进行转换,
复制代码 代码如下:

function Parse(data,dataType){
switch(dataType){
case 'num':
return parseFloat(data)||0
case 'date':
return Date.parse(data)||0
default :
return splitStr(data)
}
}

如果是数字类型直接转换为浮点数,

return parseFloat(data)||0
要是出现了布恩那个转换的对象字符串那么返回0;因为这个文档里面有一个NaN这个是无法转换的,所以返回的是0;

如果是日期类型可以用Date.parse直接转换为数字,这个转换是从1970年到转换参数的时间,
这个时间转换我试了试可以精确到秒的,比如说1971/01/2 18:12:20、01/2/1970 18:12:20写法都可以转换;
之后

return aText>;bText?-1:bText>;aText?1:0;
返回比较值aText比bText大返回一个小于0的任何数字都可以,相反返回一个正数,如果都不是的话返回0;如果不是日期也不是数字(在这个文档中目前只能转换3中数据:1.日期。2.数字。3.字符串和数字一起的),
default :
return splitStr(data)
我把他放到splitStr()里面进行转换

splitStr()的内容如下:
复制代码 代码如下:

function splitStr(data){
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}

正则表达式:分为三部分 1部分^[a-zA-Z ]*;中间部分(.*?);结尾部分[a-zA-Z ]*$
可以这样看/ /是包含块 ,
第一部分 ^表示目标字符串开头,[]之间表示A-Z无论大小写都被忽略掉,里面还有个空格,*表示它左边[]里面的内容可以出现任意次数;
中间部分 ()是个分组 ,分组内容会被放置到RegExp的第一项中'$1′,'.'匹配所有(除了空格)*?懒惰方式;
最后部分 []之间与后面的*和第一部分是一样的都是去掉字母,$表示结尾部分;
\$表示匹配$号
复制代码 代码如下:

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}
else return aText.localeCompare(bText)
}
}

否则 直接使用localeCompare进行比较,这个是专门对字符串进行比较的方法,如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数,负数和0;

代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的,这个时间会在最中间那个'th'的'span'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。

完整的代码:
复制代码 代码如下:





表格排序





返回文章









































































































































































































































































































































































































房号 日期 房间类型 床位 容量 价格/晚 合计
u0628 9/14/2008 Std Hotel Room 2 Double (27 left) 2 4 人 $109.00 $436.00
u0631 10/4/2008 Lodge Rm/Shared Bath Q (4 left) 1 2 人 $109.00 $436.00
u0636 9/18/2008 Std Hotel Room Q (34 left) 1 2 人 $117.00 $466.00
u0638 9/19/2008 Std Hotel Room 2 Q (28 left) 2 4 人 $117.00 $466.00
u0612 9/1/2008 Studio Condo (10 left) 1 4 人 $149.00 $596.00
u0626 9/13/2008 Hotel Jr Suite K (4 left) 1 2 人 $149.00 $596.00
u0641 9/22/2008 Hotel Superior K (26 left) 1 2 人 $149.00 $596.00
u0602 8/31/2008 1 Bdrm Condo K (96 left) 1 4 人 $169.00 $676.00
u0616 10/8/2008 Studio Condo Murphy (5 left) NaN 4 人 $169.00 $676.00
u0623 10/2/2008 Studio Cabin Q (6 left) 1 2 人 $169.00 $676.00
u0633 9/16/2008 Studio Q/Murphy (6 left) 2 4 人 $169.00 $676.00
u0637 10/5/2008 Lodge Room Q (4 left) 1 2 人 $169.00 $676.00
u0622 9/11/2008 Hotel Loft Ste K/Q (3 left) 2 4 人 $179.00 $716.00
u0629 10/10/2008 1 Bdrm Condo K (76 left) 1 4 人 $179.00 $716.00
u0603 9/8/2008 Hotel Loft K/Q (16 left) 2 4 人 $189.00 $756.00
u0632 9/15/2008 Hotel Loft K/2T (15 left) 3 4 人 $189.00 $756.00
u0619 10/1/2008 Studio Cabin Firepl K (6 left) 1 2 人 $209.00 $836.00
u0608 10/7/2008 1 Bdrm Condo with Den K (1 left) 1 6 人 $222.00 $886.00
u0620 9/5/2008 2 Bdrm Condo K/K (25 left) 2 6 人 $229.00 $916.00
u0630 9/7/2008 2 Bdrm Condo K/2T (57 left) 3 6 人 $229.00 $916.00
u0634 10/11/2008 2 Bdrm Condo K/Q (88 left) 2 6 人 $229.00 $916.00
u0639 9/20/2008 1 Bdrm K/Murphy (19 left) 2 4 人 $229.00 $916.00
u0614 9/2/2008 2 Bdrm Townhome (7 left) 2 4 人 $239.00 $956.00
u0610 9/10/2008 1 Bdrm Loft K/Q+2T/Murphy (5 left) 5 8 人 $269.00 $1076.00
u0625 9/12/2008 2 Bdrm K/Q/Murphy (6 left) 3 6 人 $269.00 $1076.00
u0640 9/21/2008 Exec. 2 Bdrm K/2Q/Murphy (2 left) 4 8 人 $269.00 $1076.00
u0606 9/26/2008 2 Bdrm Cabin K/Q+T (2 left) 3 5 人 $279.00 $1116.00
u0613 9/29/2008 Lodge 2 Bdrm Suite Q/Q (1 left) 2 4 人 $279.00 $1116.00
u0624 10/3/2008 1 Bdrm Cabin Firepl K (3 left) 1 4 人 $279.00 $1116.00
u0618 9/4/2008 2 Bdrm Condo w/Den Custom (1 left) 2 6 人 $329.00 $1316.00
u0627 10/9/2008 3 Bdrm Condo K/Q/Q (6 left) 3 8 人 $339.00 $1356.00
u0642 9/23/2008 2 Bdrm Cabin Firepl K/Q+T (1 left) 3 7 人 $339.00 $1356.00
u0615 9/3/2008 3 Bdrm Condo K/Q/2T (2 left) 4 8 人 $379.00 $1516.00
u0607 9/9/2008 2 Bdrm. Loft K/Q/Q,3T/SS (9 left) 6 11 人 $389.00 $1556.00
u0609 9/27/2008 Dlx 1 Bdrm Cabin Firepl K (3 left) 1 4 人 $389.00 $1556.00
u0635 9/17/2008 Exec 2 Bdrm Lft K/K/2Q/SS (1 left) 4 10 人 $399.00 $1596.00
u0621 9/6/2008 3 Bdrm Townhome (3 left) 3 6 人 $409.00 $1636.00
u0601 9/24/2008 3 Bdrm Cabin K/Q+T/2T (1 left) 5 9 人 $469.00 $1876.00
u0605 9/25/2008 Dlx 1Bd Loft,K,Q/T firepl (1 left) 3 6 人 $469.00 $1876.00
u0611 9/28/2008 Dlx 2 Bdm Cbn Firepl K/2T (3 left) 2 6 人 $469.00 $1876.00
u0604 10/6/2008 Deluxe 3 Bdrm Condo K/Q/Q (2 left) 3 8 人 $499.00 $1996.00
u0617 9/30/2008 Dlx3Bdm/2Bth/FP/K/QT/QT (1 left) 5 8 人 $549.00 $2196.00



本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

什么是这个'在JavaScript? 什么是这个'在JavaScript? Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

通过来源查看器提高您的jQuery知识 通过来源查看器提高您的jQuery知识 Mar 05, 2025 am 12:54 AM

jQuery是一个很棒的JavaScript框架。但是,与任何图书馆一样,有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误,或者只是对jQuery如何实现特定UI感到好奇

10张移动秘籍用于移动开发 10张移动秘籍用于移动开发 Mar 05, 2025 am 12:43 AM

该帖子编写了有用的作弊表,参考指南,快速食谱以及用于Android,BlackBerry和iPhone应用程序开发的代码片段。 没有开发人员应该没有他们! 触摸手势参考指南(PDF) Desig的宝贵资源

See all articles