There are many Jquery plug-ins on the front-end for table sorting, and they are also very powerful. For example, Jquery Data Tables is quite powerful in Table processing and can be used to sort, search, and pagination Tables, however, I have not carefully studied its implementation principles.
In order to better understand the principle of table sorting at the front end and to further learn Jquery, we decided to use Jquery to implement a small function of table sorting.
The main idea of this implementation is: Get the column number of the head cell with the mouse click, traverse the data row, and get the html in each <tr>, obtain the content of the <td> label corresponding to the obtained column number under each <tr> label, and obtain the type attribute value of the <th> label, concatenates the <tr> html, <td> content, and <th> type attribute values into strings and adds them to the array, then, empty all the html in the table <tr>, compare the content of <td> using different methods based on the type attribute value, and sort the array according to the comparison result, then, assign the sorted array elements to the <tr> that has been left empty. If the column has been sorted, the array is put upside down. Provides sorting rules for values, strings, and IP addresses. String sorting rules use the localeCompare method of javascript. This method supports sorting of Chinese character strings. Unfortunately, this method is not compatible with Google's browser. Therefore, the sorting results of Chinese character strings on Google Chrome are incorrect.
HTML code list:
Copy codeThe Code is as follows: View CodeTableSort. js code list:Copy codeThe Code is as follows: View Code
$ (Document). ready (function (){
Var tableObject = $ ('# tableSort'); // obtain the table object with the id tableSort
Var tbHead = tableObject. children ('thead'); // obtain thead under the table object
Var tbHeadTh = tbHead. find ('tr th'); // gets the th under the tr under thead
Var tbBody = tableObject. children ('tbody'); // obtain the tbody under the table object
Var tbBodyTr = tbBody. find ('tr'); // get the tr under the tbody
Var sortIndex =-1;
TbHeadTh. each (function () {// traverse th under thead's tr
Var thisIndex = tbHeadTh. index ($ (this); // obtain the column number of th
$ (This). mouseover (function (){
TbBodyTr. each (function () {// record tr under tbody
Var tds = $ (this). find ("td"); // gets the td object set whose column number is index.
$ (Tds [thisIndex]). addClass ("hover ");
});
}). Mouseout (function (){
TbBodyTr. each (function (){
Var tds = $ (this). find ("td ");
$ (Tds [thisIndex]). removeClass ("hover ");
});
});
$ (This). click (function (){
Var dataType = $ (this). attr ("type ");
CheckColumnValue (thisIndex, dataType );
});
});
$ ("Tbody tr"). removeClass (); // first remove all css classes of tr under tbody
$ ("Tbody tr"). mouseover (function (){
$ (This). addClass ("hover ");
}). Mouseout (function (){
$ (This). removeClass ("hover ");
});
// Sort tables
Function checkColumnValue (index, type ){
Var trsValue = new Array ();
TbBodyTr. each (function (){
Var tds = $ (this). find ('td ');
TrsValue. push (type + ". separator" + response (tds[index]).html () + ". separator" + response (this).html ());
Certificate (this).html ("");
});
Var len = trsValue. length;
If (index = sortIndex ){
TrsValue. reverse ();
} Else {
For (var I = 0; I <len; I ++ ){
Type = trsValue [I]. split (". separator") [0];
For (var j = I + 1; j <len; j ++ ){
Value1 = trsValue [I]. split (". separator") [1];
Value2 = trsValue [j]. split (". separator") [1];
If (type = "number "){
Value1 = value1 = ""? 0: value1;
Value2 = value2 = ""? 0: value2;
If (parseFloat (value1)> parseFloat (value2 )){
Var temp = trsValue [j];
TrsValue [j] = trsValue [I];
TrsValue [I] = temp;
}
} Else if (type = "ip "){
If (ip2int (value1)> ip2int (value2 )){
Var temp = trsValue [j];
TrsValue [j] = trsValue [I];
TrsValue [I] = temp;
}
} Else {
If (value1.localeCompare (value2)> 0) {// This method is not compatible with Google Chrome
Var temp = trsValue [j];
TrsValue [j] = trsValue [I];
TrsValue [I] = temp;
}
}
}
}
}
For (var I = 0; I <len; I ++ ){
$ ("Tbody tr: eq (" + I + ")" pai.html (trsValue [I]. split (". separator") [2]);
}
SortIndex = index;
}
// Convert the IP address to an integer
Function ip2int (ip ){
Var num = 0;
Ip = ip. split (".");
Num = Number (ip [0]) * 256*256*256 + Number (ip [1]) * 256*256 + Number (ip [2]) * 256 + Number (ip [3]);
Return num;
}
})
Running result:
I would like to express my special thanks to the netizen "the cold summer wind". It would be difficult to complete Jquery-related operations without the help of "the cold summer wind. I am very satisfied with this effect. I just spliced the string in the implementation operation. The process of intercepting the string is tedious and not simple enough. It still needs to be improved.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
