基于jquery的表格排序


Posted in Javascript onSeptember 11, 2010

很多高手也位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'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。

完整的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>表格排序</title> 
<script src="../jquery1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript"> $(function(){ 
$('th').click(function(){ 
var date1=(new Date()).getTime() 
var dataType=$(this).attr('dataType'); 
var index=$('th').index(this)+1; 
var arr=[]; 
var row=$('tbody tr'); 
$.each(row,function(i){ arr[i]=row[i] }) 
if($(this).hasClass('select')){ 
arr.reverse() 
} 
else { 
arr.sort(sortStr(index,dataType)) 
$('.select').removeClass(); 
$('td:nth-child('+index+')').addClass('select'); 
$(this).addClass('select') 
} 
var fragment=document.createDocumentFragment() 
$.each(arr,function(i){ 
fragment.appendChild(arr[i]) 
}) 
// $('tbody').remove(); 
//$('table').append('<tbody></tbody>') 
//Each(arr,function(o){fragment.appendChild(o)}) 
$('tbody').append(fragment) 
var date2=(new Date()).getTime() 
$('th span').text(date2-date1) 
}) 
}) 
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) 
} 
} 
function Parse(data,dataType){ 
switch(dataType){ 
case 'num': 
return parseFloat(data)||0 
case 'date': 
return Date.parse(data)||0 
default : 
return splitStr(data) 
} 
} 
function splitStr(data){ 
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
data=data.replace(re,'$1') 
return parseFloat(data) 
} 
//web开发交流blog 文档来源 www.mymickey.org 作者 mickey 
//转载请注明来源 
</script> 
<style type="text/css"> 
table { 
text-align:center; 
border:1px #ccc solid; 
border-collapse:collapse; 
width:700px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 
} 
tr { 
border-bottom:1px #ccc solid; 
} 
td { 
padding:.3em 0 .3em 0; 
} 
th { 
cursor:pointer; 
background:url(room-bg.gif) 0 -13px repeat-x; 
height:30px; 
color:#009; 
} 
td.select { 
color:#000; 
} 
th.select { 
background-image:none; 
background-color:#C4D5D9; 
} 
span { 
} 
</style> 
</head> 
<body> 
<a href="http://www.mymickey.org" style="font-size:14px; color:#F60">返回文章</a> 
<table> 
<thead> 
<tr> 
<th dataType="roomNum">房号</th> 
<th dataType="date">日期</th> 
<th dataType="roomType">房间类型<span></span></th> 
<th dataType="num">床位</th> 
<th dataType="container">容量</th> 
<th dataType="Float">价格/晚</th> 
<th dataType="Float">合计</th> 
</tr> 
</thead> 
<tbody> 
<tr > 
<td>u0628</td> 
<td >9/14/2008</td> 
<td >Std Hotel Room 2 Double (27 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td>u0631</td> 
<td >10/4/2008</td> 
<td >Lodge Rm/Shared Bath Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td >u0636</td> 
<td >9/18/2008</td> 
<td >Std Hotel Room Q (34 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$117.00</td> 
<td >$466.00</td> 
</tr> 
<tr > 
<td>u0638</td> 
<td >9/19/2008</td> 
<td >Std Hotel Room 2 Q (28 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$117.00</td> 
<td>$466.00</td> 
</tr> 
<tr > 
<td>u0612</td> 
<td >9/1/2008</td> 
<td >Studio Condo (10 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0626</td> 
<td >9/13/2008</td> 
<td >Hotel Jr Suite K (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0641</td> 
<td >9/22/2008</td> 
<td >Hotel Superior K (26 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0602</td> 
<td >8/31/2008</td> 
<td >1 Bdrm Condo K (96 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0616</td> 
<td >10/8/2008</td> 
<td >Studio Condo Murphy (5 left)</td> 
<td >NaN</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0623</td> 
<td >10/2/2008</td> 
<td >Studio Cabin Q (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0633</td> 
<td >9/16/2008</td> 
<td >Studio Q/Murphy (6 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0637</td> 
<td >10/5/2008</td> 
<td >Lodge Room Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0622</td> 
<td >9/11/2008</td> 
<td >Hotel Loft Ste K/Q (3 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0629</td> 
<td >10/10/2008</td> 
<td >1 Bdrm Condo K (76 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0603</td> 
<td >9/8/2008</td> 
<td >Hotel Loft K/Q (16 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0632</td> 
<td >9/15/2008</td> 
<td >Hotel Loft K/2T (15 left)</td> 
<td >3</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0619</td> 
<td >10/1/2008</td> 
<td >Studio Cabin Firepl K (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$209.00</td> 
<td>$836.00</td> 
</tr> 
<tr > 
<td>u0608</td> 
<td >10/7/2008</td> 
<td >1 Bdrm Condo with Den K (1 left)</td> 
<td >1</td> 
<td >6 人</td> 
<td >$222.00</td> 
<td>$886.00</td> 
</tr> 
<tr > 
<td>u0620</td> 
<td >9/5/2008</td> 
<td >2 Bdrm Condo K/K (25 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0630</td> 
<td >9/7/2008</td> 
<td >2 Bdrm Condo K/2T (57 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0634</td> 
<td >10/11/2008</td> 
<td >2 Bdrm Condo K/Q (88 left)</td> 
<td>2</td> 
<td>6 人</td> 
<td>$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0639</td> 
<td >9/20/2008</td> 
<td >1 Bdrm K/Murphy (19 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0614</td> 
<td >9/2/2008</td> 
<td >2 Bdrm Townhome (7 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$239.00</td> 
<td>$956.00</td> 
</tr> 
<tr > 
<td>u0610</td> 
<td >9/10/2008</td> 
<td >1 Bdrm Loft K/Q+2T/Murphy (5 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0625</td> 
<td >9/12/2008</td> 
<td >2 Bdrm K/Q/Murphy (6 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0640</td> 
<td >9/21/2008</td> 
<td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0606</td> 
<td >9/26/2008</td> 
<td >2 Bdrm Cabin K/Q+T (2 left)</td> 
<td >3</td> 
<td >5 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0613</td> 
<td >9/29/2008</td> 
<td >Lodge 2 Bdrm Suite Q/Q (1 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0624</td> 
<td >10/3/2008</td> 
<td >1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0618</td> 
<td >9/4/2008</td> 
<td >2 Bdrm Condo w/Den Custom (1 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$329.00</td> 
<td>$1316.00</td> 
</tr> 
<tr > 
<td>u0627</td> 
<td >10/9/2008</td> 
<td >3 Bdrm Condo K/Q/Q (6 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0642</td> 
<td >9/23/2008</td> 
<td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td> 
<td >3</td> 
<td >7 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0615</td> 
<td >9/3/2008</td> 
<td >3 Bdrm Condo K/Q/2T (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$379.00</td> 
<td>$1516.00</td> 
</tr> 
<tr > 
<td>u0607</td> 
<td >9/9/2008</td> 
<td >2 Bdrm. Loft K/Q/Q,3T/SS (9 left)</td> 
<td >6</td> 
<td >11 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0609</td> 
<td >9/27/2008</td> 
<td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0635</td> 
<td >9/17/2008</td> 
<td >Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td> 
<td >4</td> 
<td >10 人</td> 
<td >$399.00</td> 
<td>$1596.00</td> 
</tr> 
<tr > 
<td>u0621</td> 
<td >9/6/2008</td> 
<td >3 Bdrm Townhome (3 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$409.00</td> 
<td>$1636.00</td> 
</tr> 
<tr > 
<td>u0601</td> 
<td >9/24/2008</td> 
<td >3 Bdrm Cabin K/Q+T/2T (1 left)</td> 
<td >5</td> 
<td >9 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0605</td> 
<td >9/25/2008</td> 
<td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0611</td> 
<td >9/28/2008</td> 
<td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0604</td> 
<td >10/6/2008</td> 
<td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$499.00</td> 
<td>$1996.00</td> 
</tr> 
<tr > 
<td>u0617</td> 
<td >9/30/2008</td> 
<td >Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$549.00</td> 
<td>$2196.00</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
React.js入门学习第一篇
Mar 30 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
javascript多种数据类型表格排序代码分析
Sep 11 #Javascript
javascript 触发HTML元素绑定的函数
Sep 11 #Javascript
Js组件的一些写法
Sep 10 #Javascript
编写Js代码要注意的几条规则
Sep 10 #Javascript
jquery之empty()与remove()区别说明
Sep 10 #Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 #Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
You might like
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
JavaScript使用cookie
2007/02/02 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
python实现线程池的方法
2015/06/30 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
使用python实现链表操作
2018/01/26 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
基于python plotly交互式图表大全
2019/12/07 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014新年寄语
2014/01/20 职场文书
四年级科学教学反思
2014/02/10 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
自荐信范文
2019/05/20 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
基于python实现银行管理系统
2021/04/20 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技