Sorting code
Copy Code code as follows:
function sorttable (Stableid, Icol, Sdatatype) {
This.otable=document.getelementbyid (Stableid);
This.otbody=this.otable.tbodies[0];
This.coldatarows=this.otbody.rows;
This.atrs=[];
This.icol=icol;
This.sdatatype=sdatatype;
}
sorttable.prototype={
Convert:function (svalue, Sdatatype) {
Switch (sdatatype) {
Case "int":
return parseint (svalue);
Case "float":
return parsefloat (svalue);
Case "Date":
return new Date (svalue);
Default
return svalue.tostring ();
}
},
Generatecomparetrs:function (Icol, Sdatatype, that) {
return function Comparetrs (OTR1,OTR2) {
var vvalue1= that.convert (Otr1.cells[icol].firstchild.nodevalue, Sdatatype),
Vvalue2= That.convert (Otr2.cells[icol].firstchild.nodevalue, Sdatatype);
if (VValue1 < vValue2) {
return-1;
else if (vValue1 > VValue2) {
return 1;
} else{
return 0;
}
};
},
Sort:function () {
for (Var i=0,l=this.coldatarows.length;i<l;i++) {
This.aTRs.push (This.coldatarows[i]);
}
if (This.oTable.sortCol = = This.icol) {
This.aTRs.reverse ();
} else {
This.aTRs.sort (This.generatecomparetrs (This.icol, This.sdatatype, this));
}
var ofragment=document.createdocumentfragment ();
for (Var i=0,l=this.atrs.length;i<l;i++) {
Ofragment.appendchild (This.atrs[i]);
}
This.oTBody.appendChild (ofragment);
This.oTable.sortCol = This.icol;
}
}
Call Example
Copy Code code as follows:
function bindsorttable (Stableid, Icol, Sdatatype) {
var Table=document.getelementbyid (Stableid),
Ftr=table.thead.rows[0],
Tds=ftr.cells;
if (Tds[icol]) {
Tds[icol].onclick=function () {
var sorttable=new sorttable (Stableid, Icol, Sdatatype);
Sorttable.sort ();
}
}
}
Window.onload=function () {
Bindsorttable ("Tblsort", 0);
Bindsorttable ("Tblsort", 1);
Bindsorttable ("Tblsort", 2, "int");
Bindsorttable ("Tblsort", 3, "float");
Bindsorttable ("Tblsort", 4, "date");
}
Full Demo:
<! DOCTYPE html> <ptml> <pead> <meta charset= "Utf-8"/> <title>jscode demo</title> <s Tyle type= "Text/css" > table{border-collapse:collapse; Table Thead tr{Cursor:pointer; Background: #EEE; td{border:1px solid #CCC; padding:10px; } </style> <script type= "Text/javascript" > Function sorttable (Stableid, Icol, Sdatatype) {THIS.OTABLE=DOCU Ment.getelementbyid (Stableid); This.otbody=this.otable.tbodies[0]; This.coldatarows=this.otbody.rows; This.atrs=[]; This.icol=icol; This.sdatatype=sdatatype; } sorttable.prototype={convert:function (svalue, Sdatatype) {switch (sdatatype) {case ' int ': return parseint (svalue); Case "float": Return parsefloat (svalue); Case ' Date ': return new Date (svalue); Default:return svalue.tostring (); }, Generatecomparetrs:function (Icol, Sdatatype, that) {return function comparetrs (OTR1,OTR2) {var vvalue1= that.conv ERT (Otr1.cells[icol].firstchild.nodevalue, sdatatype), VValue2= That.convert (Otr2.cells[icol].firstchild.nodevalue, Sdatatype); if (VValue1 < vValue2) {return-1; else if (vValue1 > VValue2) {return 1; } else{return 0; } }; }, Sort:function () {for (Var i=0,l=this.coldatarows.length;i<l;i++) {This.aTRs.push (this.coldatarows[i)); } if (This.oTable.sortCol = = This.icol) {this.aTRs.reverse (); else {this.aTRs.sort (This.generatecomparetrs (This.icol, This.sdatatype, this)); var ofragment=document.createdocumentfragment (); for (Var i=0,l=this.atrs.length;i<l;i++) {ofragment.appendchild (this.atrs[i]); } this.oTBody.appendChild (Ofragment); This.oTable.sortCol = This.icol; } function Bindsorttable (Stableid, Icol, Sdatatype) {var Table=document.getelementbyid (Stableid), ftr=table.thead.ro Ws[0], tds=ftr.cells; if (Tds[icol]) {tds[icol].onclick=function () {var sorttable=new sorttable (Stableid, Icol, Sdatatype); Sorttable.sort (); }} window.onload=function () {bindsorttable ("Tblsort", 0); BindsorttaBLE ("Tblsort", 1); Bindsorttable ("Tblsort", 2, "int"); Bindsorttable ("Tblsort", 3, "float"); Bindsorttable ("Tblsort", 4, "date"); } </script> </pead> <body> <table id= "Tblsort" > <thead> <tr> <td>last Nam e</td> <td>first name</td> <td>Number</td> <td>Score</td> <td> birthday</td> </tr> </thead> <tbody> <tr> <td>O</td> <td>d</td> ; <td>5</td> <td>20.1</td> <td>7/12/1999</td> </tr> <tr> <td>p& lt;/td> <td>C</td> <td>3</td> <td>30.1</td> <td>7/12/1990</td> & lt;/tr> <tr> <td>Q</td> <td>B</td> <td>4</td> <td>27.1</td > <td>7/12/1995</td> </tr> <tr> <td>R</td> <td>A</td> <td>2 </td> <td>24.1</td> <td>7/12/1998</td> </tr> </tbody> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Author: artwl
Source: http://artwl.cnblogs.com
