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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。