TableSort.js表格排序插件使用方法详解
本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>TableSort</title> <styletype="text/css"> table{ border-collapse:collapse; width:300px; } tablecaption{ border-right:1pxsolid#abc; border-left:1pxsolid#abc; border-top:2pxsolid#000; border-bottom:2pxsolid#000; background-color:#afd; } #salestr,#salestd{ border:1pxsolid#abc; text-align:center; } </style> </head> <body> <tableid="sales"summary="summaryhere"> <caption> MainTitle </caption> <col/> <col/> <col/> <thead> <tr> <thclass="asc">Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody> <tr> <td>A1</td> <td>S2</td> <td>W3</td> </tr> <tr> <td>B1</td> <td>C2</td> <td>V3</td> </tr> <tr> <td>C1</td> <td>X2</td> <td>K3</td> </tr> </tbody> <!--tfoot><tr><tdcols=3>otherdescription</td></tr></tfoot--> </table> <buttononclick="fn()">Test</button> <scriptlanguage="javascript"> functionTableSort(id){ this.tbl=document.getElementById(id); this.lastSortedTh=null; if(this.tbl&&this.tbl.nodeName=="TABLE"){ varheadings=this.tbl.tHead.rows[0].cells; for(vari=0;headings[i];i++){ if(headings[i].className.match(/asc|dsc/)){ this.lastSortedTh=headings[i]; } } this.makeSortable(); } } TableSort.prototype.makeSortable=function(){ varheadings=this.tbl.tHead.rows[0].cells; for(vari=0;headings[i];i++){ headings[i].cIdx=i; vara=document.createElement("a"); a.href="#"; a.innerHTML=headings[i].innerHTML; a.onclick=function(that){ returnfunction(){ that.sortCol(this); returnfalse; } }(this); headings[i].innerHTML=""; headings[i].appendChild(a); } } TableSort.prototype.sortCol=function(el){ varrows=this.tbl.rows; varalpha=[],numeric=[]; varaIdx=0,nIdx=0; varth=el.parentNode; varcellIndex=th.cIdx; for(vari=1;rows[i];i++){ varcell=rows[i].cells[cellIndex]; varcontent=cell.textContent?cell.textContent:cell.innerText; varnum=content.replace(/(\$|\,|\s)/g,""); if(parseFloat(num)==num){ numeric[nIdx++]={ value:Number(num), row:rows[i] } }else{ alpha[aIdx++]={ value:content, row:rows[i] } } } functionbubbleSort(arr,dir){ varstart,end; if(dir===1){ start=0; end=arr.length; }elseif(dir===-1){ start=arr.length-1; end=-1; } varunsorted=true; while(unsorted){ unsorted=false; for(vari=start;i!=end;i=i+dir){ if(arr[i+dir]&&arr[i].value>arr[i+dir].value){ vartemp=arr[i]; arr[i]=arr[i+dir]; arr[i+dir]=temp; unsorted=true; } } } returnarr; } varcol=[],top,bottom; if(th.className.match("asc")){ top=bubbleSort(alpha,-1); bottom=bubbleSort(numeric,-1); th.className=th.className.replace(/asc/,"dsc"); }else{ top=bubbleSort(numeric,1); bottom=bubbleSort(alpha,1); if(th.className.match("dsc")){ th.className=th.className.replace(/dsc/,"asc"); }else{ th.className+="asc"; } } if(this.lastSortedTh&&th!=this.lastSortedTh){ this.lastSortedTh.className=this.lastSortedTh.className.replace( /dsc|asc/g,""); } this.lastSortedTh=th; col=top.concat(bottom); vartBody=this.tbl.tBodies[0]; for(vari=0;col[i];i++){ tBody.appendChild(col[i].row); } } functionfn(){ varsales=document.getElementById('sales'); varsortTable=newTableSort('sales'); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。