JavaScript study notes (4) table sorting

The table sorting implemented in this article can be roughly divided into the following steps:
1. Get all the rows to be sorted, and push their references into an array
2. Write the array used when sorting according to the rows to be sorted Comparison function
3. Sort the array containing all row references 4. Write the sorted array back to the DOM in the specified order with the rows referenced by the array

If you are not familiar with using DOM to operate tables, you can refer to "Using DOM to Write Browser-Compatible Table Operations". If you are not familiar with array sorting, you can refer to "Array Sorting and Sorting in Chinese Characters" "The use of localeCompare() method", because using DOM to operate tables and array sorting is the basis of table sorting.
Let’s first take a look at the code used in our example. This article will analyze it step by step according to the steps mentioned above:
1         var asc = true;
2         var arrayTr = []; // Container that stores all row references to be sorted
3 Function Sorttable () {
4 // Obtain all the lines to be sorted. . ROWS ;
8                                                                                                                                    }
12                              /If it is in ascending order
13                                                                                        ’ s ’ s ’ s ’ s ’                     through together to ’ s ’s ’ through ’s   through using         out through out out out out out out out out out Out out out of  when to ward over-becoming sorting with being sorting-- asc = false;
17 } else {
18                                                                                                                   
22                                                                                                                                                                                                                                                       Rows are rewritten back to the DOM in numerical order
24 var oFragment = document.createDocumentFragment();
25 for(var j =0; j < arrayTr.length;j++){
26                        [j]);
27                                         oTBody. ;thead/> and tags are used to separate the title part of the table and the parts to be sorted. Due to the length, the HTML code is no longer displayed. Secondly, "javaScript Advanced Programming" says that the tBodies attribute of Table is A collection in JS, not an array, does not have a sort() method, so it cannot be used for direct sorting. We still need to study the concept of JS collections, but this is not the focus of this article. The key point we want to explain here is, tBodies cannot be sorted directly.
Lines 13--22 of the program implement the third step. Here we hide the specific implementation of the second step (will be explained in detail in the later part). We think this can better explain our ideas without getting ourselves entangled. Due to the specific method implementation, there is no overall understanding of the program. It should also be noted that in the program we use a global container to load the sorted rows, so after the function is executed, arrayTr will always contain the last sorted row reference sequence. At this time, if we want to reverse the order, we only need to call reverse( ) method without the need to reverse sort the array.
Line 24 of the program uses document.createDocumentFragment() to get a document fragment. documentFragment is an incomplete document object, mainly used to store Elements that have not been added to the DOM tree yet. As a cache for js operations on DOM, it is very easy to use. It will present the changes in the DOM at once, instead of having to be redrawn by the client every time the DOM is operated.
Let’s look at the specific implementation of the function used to implement our second step:
1   /**数 2 * Comparison function * 3 * @param {Object} Param1: Ring 1
4 * @param {Object} Param2 Ring 2
5 * @Return {Number} If Param1 & GT; Param2 returns 1
6 *If Param1 == Param2 returns 0
7 *If Param1 & LT; Param2 returns -1
8*/
9       function compareFunc(oTr1,oTr2){
10     var param1 = oTr1.cells[0].childNodes[ 0].nodeValue;
11 var param2 = oTr2.cells[0].childNodes[0].nodeValue;
12 //If both parameters are string types
13 if(isNaN(param1) && isNaN(param2) ){
14                   return param1.localeCompare(param2); 
15                                                                                                                                                                              param2)){
18                  return - ;
23                                                                                                                                                                                                                                                                   Each parameter is a number
25                                                                                   using   using using         using using ‐                   through using   out out out through out through Through out off through off ‐ off ‐ ‐ ‐ ‐ ‐ to 1) == Number(param2)) return 0;
28                                                                                           using using use using           use using ’ ’ s using ’ using ’s ’ through out through out through out through through out through through ‐ through ‐ ‐ ‐‐ ‐‐ ‐ ‐ ‐ ‐ ‐ ‐ 1 Use of localeCompare() method", because we only changed the way of fetching data in lines 10 and 11.
Above we have explained the ideas and methods for sorting single-column tables. With these ideas, we can easily expand our program to implement table sorting with more functions.

The above is the content of the table sorting in JavaScript study notes (4). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!