Javascript multi-data type table sorting code analysis

Chinese character sorting,
Hybrid sorting,
Data size sorting,
Sort file types (suffix names)
Date and time sorting,
Price sorting,
Sort Chinese mixed numbers;
Usage: new tableListSort (arguments, arguments) after the document is loaded ).

Two parameters are accepted: the first parameter is required, which can be a string ID or a table object, and the second parameter is optional. this parameter is an object, {data: index, fileType: index, fn: function () {}}; the object has three optional attributes. The first and second are the extended sorting data types, the third parameter is the function to be executed after sorting. If the table data contains the data size to be sorted, such as 1 kb, 1 MB, and 1 GB, You can {data: index }; index is the base value of a column to be sorted in the table, which starts from 0. For example, the second column of the table is a data type such as 1 kb, {data: 2 }; the second property of the object {fileType: index}. The extended sorting is file type, such as the suffix names such as xml, jpg, and exe. Index is also the column's base value.

The third optional attribute of the object is the function to be executed after sorting {fn: function () {executed code }}.

The required element in HTML code is the table element. The first line of the table element must use the thead element to include tr, And the tr must contain the clickable sorting element th; the next sibling element of thead must be tbody, And the tbody must contain tr. Sort data using td, table can also contain caption and tfoot.

Updated on April 9, April 11: The icon marked in ascending or descending order after sorting is added.
If you do not want to add a custom class, you can choose not to set this attribute. You do not need to add CSS when adding the mouse style mymickey to the script.
Table. Index is the coordinate value sorted last time; table. Index is initialized to null;
Fn: The fini function is only a function that needs to be executed after sorting. Even if it is not, it can be sorted. Here, a function that needs to be executed after sorting is passed to add the icon for sorting down and up.

The following source code:
Copy codeThe Code is as follows:
Window. onload = function (){
Function fini (num ){
Table. th [num]. className =
Table. th [num]. className = 'selectup '?
'Selectlow': 'selectup'; // switch the flag icon.

Each (table. Row, function (o) {// highLight the column in the current sorting
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 canceled icon
Table. th [table. Index]. className = '';
}
}

Var table = new tableListSort ($ ('tb'), {data: 8, fileType: 9, fn: fini}) // The new parameter is passed after the document is loaded.
}

Copy codeThe Code is as follows:
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); // locate the table element.
This. th = $ (this. table, 'thead') [0], 'th'); // locate the th Element
This. tbody = $ (this. table, 'tbody') [0]; // locate the tbody element.
This. Row = $ (this. tbody, 'tr'); // locate the tr element.
This. rowArr = []; // tr inserts 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 comparing data types.
This. file = Math. abs (this. options. fileType) | null; // compare the coordinates of the file type.
Each (this. Row, function (o) {this. rowArr. push (o)}. bind (this); // load the tr Object List into the Array
For (var I = 0; this. th. length> I; I ++ ){
This. th [I]. onclick = this. Sort. bind (this, I) // use bind to indirectly hold a lower value (variable) and pass it in the past
This. th [I]. style. cursor = 'pointer ';
}
This. re =/([-] {0, 1} [0-9.] {1,})/g; // Replace the Regular Expression
This. dataIndex & subData (this. Row, this. dataIndex, this. Row. length );
},

Sort: function (num ){
// Var date1 = new Date (). getTime () // test the sorting time. If you want to test the sorting time, comment it out.
// Another canceled icon is clicked.
(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 has been clicked, use the reverse order of the reverse () column. Otherwise, the sorting is performed because the pre-defined sort () method is used, so if you want to enable the sort function
// If you know the value of the column to be sorted, bind () will pass num, and this will be called;
Var frag = document. createDocumentFragment (); // create a document Fragment
Each (this. rowArr, function (o) {frag. appendChild (o)}); // Insert the sorted array into the File Fragment
This. tbody. appendChild (frag); // fragment insert Node
This. th [num]. setAttribute ('sorted', 'ed ');
// $ ('Spans '). innerHTML = (new Date (). getTime ()-date1; // test the sorting time. If you want to test the sorting time, comment it out.
This. finish (num); // function executed after sorting
This. Index = num; // The sorted coordinate value.
},
NaturalSort: function (num, a, B ){
// Determine whether data is sorted. If so, search for the attribute.
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. Find the content in the cell to be sorted.
Var x = a. toString (). toLowerCase () | '', y = B. toString (). toLowerCase () | '',
NC = String. fromCharCode (0 ),
XN = x. replace (this. re, nC + '$ 1' + nC). split (nC), // split the string into an array
YN = y. replace (this. re, nC + '$ 1' + nC). split (nC ),
XD = (new Date (x). getTime (), yD = (new Date (y). getTime ()
XN = this. file! = Num? XN: xN. reverse (), // reverse if filetype exists
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 comparison of letters, 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 data size sorting, add a custom attribute to td and give the data // regular expression can also be judged. // mymickey does not write regular expressions here
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 );
}
}
}

Copy codeThe Code is as follows:
Table # tb {
Text-align: center;
Border: 1px # ccc solid;
Border-collapse: 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;
}

Package download http://www.jb51.net/jiaoben/32017.html