基于jquery的表格排序

更新時(shí)間：2010年09月11日 03:13:24 作者：

看了《javascript高級(jí)程序設(shè)計(jì)》里面有個(gè)表格排序的例子；覺得很有意思，所以自己用jquery的基本庫(kù)做了一個(gè)，里面的概念基本和書里面的差不多

很多高手也位jquery寫了專門的排序庫(kù)，因?yàn)樽约阂蚕雵L試一下，
當(dāng)然運(yùn)行速度實(shí)在不能接受，但是我會(huì)慢慢的把他改進(jìn)的。
注：這里只是拿出了一部分代碼來，查看演示demo
文檔載入后給'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到點(diǎn)擊對(duì)象的自定義屬性dataType，當(dāng)然這個(gè)不符合W3C的標(biāo)準(zhǔn)是無法通過檢驗(yàn)的，也可以用ID或者class來定義，但是我覺得這樣直觀點(diǎn)在Transitional模式下也可以正常解讀.
2.
var index=$('th').index(this)+1;
找到被點(diǎn)擊對(duì)象在文檔中的位置加上1,加1是為了給所對(duì)應(yīng)的列的td添加樣式才做的。
因?yàn)橛?eq()只能得到td的全文檔位置，而用：nth-child()的話得到的是每個(gè)td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
將tbody里所有tr存到變量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍歷所有行講它插入arr數(shù)組.

5.if($(this).hasClass('select')){arr.reverse()}
如果這個(gè)'th'被點(diǎn)擊過那么它將會(huì)被添加select樣式，如果是這樣直接將原來的arr數(shù)組反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否則，將arr用sort()方法進(jìn)行排序sort()方式可以接受1個(gè)函數(shù)，這個(gè)函數(shù)接受2個(gè)參數(shù)作為需要比較的數(shù)據(jù)，我在這里定義為
sortStr();
它有兩個(gè)參數(shù):

復(fù)制代碼代碼如下:

 
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&gt;;bText?-1:bText&gt;;aText?1:0; 

} 
else return aText.localeCompare(bText) 
} 
} 

第一個(gè)是index，它是在click事件中獲得的變量，這個(gè)變量包含了被點(diǎn)擊的那個(gè)'th'的在文檔中的位置是一個(gè)數(shù)字，
jquert的index()方法獲得對(duì)象的位置，這個(gè)位置從0算起，這個(gè)例子中有6個(gè)'th'；

第二個(gè)參數(shù)是dataType,他包含每個(gè)'th'的屬性值。

sortStr()里面包含了一個(gè)比較的函數(shù)，這個(gè)函數(shù)是匿名函數(shù)，它有2個(gè)參數(shù)每個(gè)參數(shù)代表著一個(gè)'tbody tr'，（在這里a和b代表需要比較的tr）這兩個(gè)參數(shù)是在包含他的函數(shù)環(huán)境中獲取的，sort()方法里面的參數(shù)，在這是一個(gè)函數(shù)，這個(gè)函數(shù)都會(huì)獲得數(shù)組對(duì)象的元素，
這個(gè)匿名函數(shù)返回對(duì)操作數(shù)組的引用。
arr里面包含的一個(gè)數(shù)組，每個(gè)數(shù)組的值包含對(duì)tbody里面的tr的引用，排序函數(shù)按照返回的值對(duì)原有數(shù)組里面的元素直接進(jìn)行位置的改變，

var aText=$(a).find('td:nth-child('+index+')').text();
獲取需要比較的行里面其中一個(gè)td里面包含的文本這個(gè)就是需要比較的值，
click事件中得到的index變量成為參數(shù)傳遞到這里就是為了得到th所對(duì)應(yīng)的td的位置；

復(fù)制代碼代碼如下:

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

如果需要排序的類型是不包含了數(shù)字和字母的話，（因?yàn)閾碛衦oomType值的元素所包含了數(shù)字和字母），將獲得的td里面的文本值和dataType傳遞到
Parse()里面進(jìn)行轉(zhuǎn)換，

復(fù)制代碼代碼如下:

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

如果是數(shù)字類型直接轉(zhuǎn)換為浮點(diǎn)數(shù)，

return parseFloat(data)||0
要是出現(xiàn)了布恩那個(gè)轉(zhuǎn)換的對(duì)象字符串那么返回0；因?yàn)檫@個(gè)文檔里面有一個(gè)NaN這個(gè)是無法轉(zhuǎn)換的，所以返回的是0；

如果是日期類型可以用Date.parse直接轉(zhuǎn)換為數(shù)字，這個(gè)轉(zhuǎn)換是從1970年到轉(zhuǎn)換參數(shù)的時(shí)間，
這個(gè)時(shí)間轉(zhuǎn)換我試了試可以精確到秒的，比如說1971/01/2 18:12:20、01/2/1970 18:12:20寫法都可以轉(zhuǎn)換;
之后

return aText>;bText?-1:bText>;aText?1:0;
返回比較值aText比bText大返回一個(gè)小于0的任何數(shù)字都可以，相反返回一個(gè)正數(shù)，如果都不是的話返回0；如果不是日期也不是數(shù)字（在這個(gè)文檔中目前只能轉(zhuǎn)換3中數(shù)據(jù)：1.日期。2.數(shù)字。3.字符串和數(shù)字一起的）,
default :
return splitStr(data)
我把他放到splitStr()里面進(jìn)行轉(zhuǎn)換

splitStr()的內(nèi)容如下：

復(fù)制代碼代碼如下:

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

正則表達(dá)式：分為三部分 1部分^[a-zA-Z ]*;中間部分(.*?);結(jié)尾部分[a-zA-Z ]*$
可以這樣看/ /是包含塊，
第一部分 ^表示目標(biāo)字符串開頭，[]之間表示A-Z無論大小寫都被忽略掉，里面還有個(gè)空格，*表示它左邊[]里面的內(nèi)容可以出現(xiàn)任意次數(shù);
中間部分 ()是個(gè)分組，分組內(nèi)容會(huì)被放置到RegExp的第一項(xiàng)中'$1′，'.'匹配所有（除了空格）*?懶惰方式;
最后部分 []之間與后面的*和第一部分是一樣的都是去掉字母，$表示結(jié)尾部分；
\$表示匹配$號(hào)

復(fù)制代碼代碼如下:

 
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&gt;;bText?-1:bText&gt;;aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
} 

否則直接使用localeCompare進(jìn)行比較，這個(gè)是專門對(duì)字符串進(jìn)行比較的方法，如:字符串'a'比字符串'b'排在26的單詞的前面;返回的依然是大于0的數(shù)，負(fù)數(shù)和0；

代碼最開頭部分的 new Date和結(jié)束部分的new Date是計(jì)算表格排序時(shí)間的，這個(gè)時(shí)間會(huì)在最中間那個(gè)'th'的'span'標(biāo)記里面顯示出來，這樣是為了測(cè)試整個(gè)表格排序從排序開始到排序結(jié)束所花費(fèi)的時(shí)間。

完整的代碼:

復(fù)制代碼代碼如下:

<!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開發(fā)交流blog 文檔來源 www.mymickey.org 作者 mickey 
//轉(zhuǎn)載請(qǐng)注明來源 
</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  style="font-size:14px; color:#F60">返回文章</a> 

<table> 
<thead> 
<tr> 
<th dataType="roomNum">房號(hào)</th> 
<th dataType="date">日期</th> 
<th dataType="roomType">房間類型<span></span></th> 
<th dataType="num">床位</th> 
<th dataType="container">容量</th> 
<th dataType="Float">價(jià)格/晚</th> 
<th dataType="Float">合計(jì)</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> 