基于jquery的表格排序

　　很多高手也位jquery写了专门的排序库，因为自己也想尝试一下，

　　当然运行速度实在不能接受，但是我会慢慢的把他改进的。

　　注：这里只是拿出了一部分代码来，查看演示demo

　　文档载入后给'th'添加click事件。

　　$('th').click(function(){

　　var date1=(new Date()).getTime()

　　var dataType=$(this).attr('dataType');

　　找到点击对象的自定义属性dataType，当然这个不符合W3C的标准是无法通过检验的，也可以用ID或者class来定义，但是我觉得这样直观点在Transitional模式下也可以正常解读.

　　var index=$('th').index(this)+1;

　　找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。

　　因为用:eq()只能得到td的全文档位置，而用：nth-child()的话得到的是每个td在自己的父元素里面的序列位置。

　　var row=$('tbody tr');

　　将tbody里所有tr存到变量row.

　　$.each(row,function(i){ arr[i]=row[i] })

　　遍历所有行讲它插入arr数组.

　　5.if($(this).hasClass('select')){arr.reverse()}

　　如果这个'th'被点击过那么它将会被添加select样式，如果是这样直接将原来的arr数组反向。

　　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">

　　<head>

　　$(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>

　　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>

　　<table>

　　<thead>

　　<tr>

　　</tr>

　　</thead>

　　<tbody>

　　<tr >

　　<td >Std Hotel Room 2 Double (27 left)</td>

　　</tr>

　　<tr >

　　<td >Lodge Rm/Shared Bath Q (4 left)</td>

　　</tr>

　　<tr >

　　<td >Std Hotel Room Q (34 left)</td>

　　</tr>

　　<tr >

　　<td >Std Hotel Room 2 Q (28 left)</td>

　　</tr>

　　<tr >

　　<td >Studio Condo (10 left)</td>

　　</tr>

　　<tr >

　　<td >Hotel Jr Suite K (4 left)</td>

　　</tr>

　　<tr >

　　<td >Hotel Superior K (26 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm Condo K (96 left)</td>

　　</tr>

　　<tr >

　　<td >Studio Condo Murphy (5 left)</td>

　　</tr>

　　<tr >

　　<td >Studio Cabin Q (6 left)</td>

　　</tr>

　　<tr >

　　<td >Studio Q/Murphy (6 left)</td>

　　</tr>

　　<tr >

　　<td >Lodge Room Q (4 left)</td>

　　</tr>

　　<tr >

　　<td >Hotel Loft Ste K/Q (3 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm Condo K (76 left)</td>

　　</tr>

　　<tr >

　　<td >Hotel Loft K/Q (16 left)</td>

　　</tr>

　　<tr >

　　<td >Hotel Loft K/2T (15 left)</td>

　　</tr>

　　<tr >

　　<td >Studio Cabin Firepl K (6 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm Condo with Den K (1 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Condo K/K (25 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Condo K/2T (57 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Condo K/Q (88 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm K/Murphy (19 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Townhome (7 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm Loft K/Q+2T/Murphy (5 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm K/Q/Murphy (6 left)</td>

　　</tr>

　　<tr >

　　<td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Cabin K/Q+T (2 left)</td>

　　</tr>

　　<tr >

　　<td >Lodge 2 Bdrm Suite Q/Q (1 left)</td>

　　</tr>

　　<tr >

　　<td >1 Bdrm Cabin Firepl K (3 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Condo w/Den Custom (1 left)</td>

　　</tr>

　　<tr >

　　<td >3 Bdrm Condo K/Q/Q (6 left)</td>

　　</tr>

　　<tr >

　　<td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td>

　　</tr>

　　<tr >

　　<td >3 Bdrm Condo K/Q/2T (2 left)</td>

　　</tr>

　　<tr >

　　</tr>

　　<tr >

　　<td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td>

　　</tr>

　　<tr >

　　</tr>

　　<tr >

　　<td >3 Bdrm Townhome (3 left)</td>

　　</tr>

　　<tr >

　　<td >3 Bdrm Cabin K/Q+T/2T (1 left)</td>

　　</tr>

　　<tr >

　　<td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td>

　　</tr>

　　<tr >

　　<td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td>

　　</tr>

　　<tr >

　　<td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td>

　　</tr>

　　<tr >

　　</tr>

　　</tbody>

　　</table>

　　</body>

　　</html>

教程首页更多教程