首页 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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles