很多高手也位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 |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
