jquery table Sorting

HTML code

TABLE#TB {
Text-align:center;
border:1px #ccc Solid;
Border-collaps tutorial E:collapse;
font-size:12px;
Font-family:arial, Helvetica, Sans-serif;
Color: #666;
width:900px;
Background:url (room-bg.gif) 0-13px repeat-x;
}
TABLE#TB TD {
Border-bottom: #ccc 1px solid;
Padding:.3em 0 3em 0;
}

#tb th {
height:30px;
Color: #009;
padding-right:16px;
}
#tb thead tr{

}

#tb td.highlight{color: #000;}
#tb Th.selectup {
Background:url (up1.png) No-repeat Right center transparent;

}
#tb Th.selectdown {
Background:url (down1.png) No-repeat Right center transparent;
}
#tb tfoot{
Font-weight:bold;
Color: #06f;
Background:url (room-bg.gif) 0-13px repeat-x;
}

JS Code
Window.onload=function () {
function fini (num) {
Table.th[num].classname=
table.th[num].classname== ' Selectup '?
' Selectdown ': ' Selectup ';//Toggle indicator icon

Each (Table.row,function (o) {//highlight Highlight the currently sorted column
O.cells[num].classname= ' highlight ';
if (table.index!=null&&table.index!=num) {
O.cells[table.index].classname= ';
}
});
if (table.index!=null&&table.index!=num) {//Another clicked the original icon that was canceled
Table.th[table.index].classname= ';
}
}

var table=new tablelistsort ($ (' TB '), {Data:8,filetype:9,fn:fini})//document load new pass parameter
}

JS Code

var class={
Create:function () {
return function () {
This.init.apply (this,arguments)
}
}
}
function each (O,FN) {
for (Var j=0,len=o.length;j<len;j++) {
FN (O[J],J)
}
}

Function.prototype.bind=function () {
var method=this;
var args=array.prototype.slice.call (arguments);
var object=args.shift ();
Return function () {
return method.apply (Object,args.concat (Array.prototype.slice.call (arguments))
}
}
Function $ (elem,elem2) {
var arr=[];
typeof elem== ' string ' Arr.push (document.getElementById (elem)): Arr.push (Elem);
Elem2&&arr.push (Arr[0].getelementsbytagname (ELEM2));
(arr.length>1) && (typeof elem== ' object ') && (Arr.shift ());
return arr.length!=2?arr[0]:arr[1];
}

var tablelistsort=class.create ()
tablelistsort.prototype={
Init:function (tables,options) {
this.table=$ (tables);//Find TABLE element
this.th=$ ($ (this.table, ' thead ') [0], ' th ');/find th element
this.tbody=$ (this.table, ' tbody ') [0];//find TBODY Element
this.row=$ (This.tbody, ' tr '); Find the TR Element
This.rowarr=[];//tr into this array
This.index=null;
this.options=options| | {};
this.finish=this.options.fn| | function () {};
This.dataindex=math.abs (this.options.data) | | null;//provides coordinates for the comparison data type.
This.file=math.abs (this.options.filetype) | | NULL;//provides the need to compare file type coordinates
Each (This.row,function (o) {this.rowarr.push (O)}.bind (this));//Load a TR object list into an array
for (Var i=0;this.th.length>i;i++) {
This.th[i].onclick=this.sort.bind (this,i)//use bind to keep a subscript value (variable) indirectly, passing past
this.th[i].style.cursor= ' pointer ';
}
this.re=/([-]{0,1}[0-9.] {1,}) /g;//Replacement Regular Expression
This.dataindex&&subdata (this.row,this.dataindex,this.row.length);
},

Sort:function (num) {
var date1=new date (). GetTime ()//test for sort time if you want to test the sort time, please comment and remove
The other was clicked and the original was canceled to indicate the icon
(this.index!=null&&this.index!=num) &&this.th[this.index].setattribute (' sorted ', ');
This.th[num].getattribute (' sorted ')!= ' Ed '?
This.rowarr.sort (This.naturalsort.bind (This,num)): This.rowarr.reverse ();
If the current object is clicked, use the reverse () column directly to reverse the order, otherwise sort, because the predefined sort () method is used, so if the function that performs the sort
If you know the subscript value of the column you want to sort, bind () passes NUM past, this to invoke;
var frag=document.createdocumentfragment ();//Create Document fragmentation
Each (This.rowarr,function (o) {frag.appendchild (O)});//Insert the sorted array into the document fragment
This.tbody.appendchild (Frag);//Fragment Insert Node
This.th[num].setattribute (' sorted ', ' Ed ');
$ (' spans '). Innerhtml= (new Date (). gettime ())-date1;//test for sort time if you want to test the sort time, please comment and remove
This.finish (num);//The function that is performed after sorting
this.index=num;//The coordinate value that is ordered
},
Naturalsort:function (Num,a, b) {
Judge whether the data is sorted if it is. Find attributes
var a=this.dataindex!=num?a.cells[num].innerhtml:a.cells[num].getattribute (' Data '),
B=this.dataindex!=num?b.cells[num].innerhtml:b.cells[num].getattribute (' data ');
Num is passed by the bind method to find the contents of the cell that needs to be sorted
var x = a.tostring (). toLowerCase () | | ", y = b.tostring (). toLowerCase () | | '',
NC = String.fromCharCode (0),
xn = x.replace (this.re, NC + ' "+ NC). Split (NC),//split string into groups
Yn = y.replace (this.re, NC + ' $ ' + NC). Split (NC),
xd = (new date (x)). GETTIME (), yd = (new date (y)). GetTime ()
xn = this.file!=num?xn:xn.reverse (),//If there is filetype, reverse order
Yn = This.file!=num?yn:yn.reverse ()

IF (XD && yd && XD < yd)
return-1;
else if (XD && yd && XD > yd)
return 1;
For (var cloc=0, nums = Math.max (Xn.length, yn.length); cloc < nums; cloc++)
if ((parsefloat (xn[cloc) | | xn[cloc]) < (parsefloat (yn[cloc)) | | yn[cloc])
cannot be converted to Floatnumber for direct alphabetic comparisons, such as ' A ' < ' B ' print//true
return-1;
else if ((parsefloat (xn[cloc) | | xn[cloc]) > (parsefloat (yn[cloc) | | yn[cloc])
return 1;
return 0;
}

}
Function Subdata (o,i,len) {//If there is a sort of data size for TD to add a custom attribute to data//is also possible to judge//mymickey not write regular
for (Var J=0;len >j;j++) {
if (o[j].cells[i].innerhtml.substring (o[j].cells[i].innerhtml.lastindexof (' KB ')). toLowerCase () = = ' KB ') {
O[j].cells[i].setattribute (' Data ', parsefloat (o[j].cells[i].innerhtml) *1024);
}
if (O[j].cells[i].innerhtml.substring (O[j].cells[i].innerhtml.lastindexof (' MB ')). toLowerCase () = = ' mb ') {
O[j].cells[i].setattribute (' Data ', parsefloat (o[j].cells[i].innerhtml) *1000000);
}
Else if (o[j].cells[i].innerhtml.substring (O[j].cells[i].innerhtml.lastindexof (' GB ')). toLowerCase () = = ' GB ') {
O[j].cells[i].setattribute (' Data ', parsefloat (o[j].cells[i].innerhtml) *1000000000);
}
}
}