JavaScript learning notes (4) Table sorting

JavaScript learning notes (4) Table sorting the table sorting implemented in this article can be roughly divided into the following steps:
1. Obtain all rows to be sorted and push them to an array.
2. Compile the comparison function for Array sorting based on the rows to be sorted.
3. Sort the array containing all row references.
4. Write the sorted array back to the DOM in the specified order.

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 sorting arrays, you can refer to "use of the localeCompare () method in array sorting and Chinese Character sorting", because using DOM to operate tables and array sorting is the basis of table sorting.
Let's take a look at the code used in our example. This article will analyze it step by step based on the steps mentioned above:
1 var asc = true;
2 var arrayTr = []; // the container that stores all row references to be sorted.
3 function sortTable (){
4 // obtain all rows to be sorted
5 var oTable = document. getElementById ("oTable ");
6 var oTBody = oTable. tBodies [0];
7 var allTr = oTBody. rows;
8 // put the rows to be sorted into an array for sorting
9 for (var I = 0; i10 arrayTr. push (allTr [I]);
11}
12 // in ascending order
13 if (asc ){
14 arrayTr. sort (compareFunc );
15 oTable. rows [0]. title = "click to sort tables in descending order ";
16 asc = false;
17} else {
18 // in descending order
19 arrayTr. reverse ();
20 oTable. rows [0]. title = "click to sort tables in ascending order ";
21 asc = true;
22}
23 // re-write the row that has been resumed to the DOM in order of numbers
24 var oFragment = document. createDocumentFragment ();
25 for (var j = 0; j <arrayTr. length; j ++ ){
26 oFragment. appendChild (arrayTr [j]);
27}
28 oTBody. appendChild (oFragment );
29} line 5-11 of the program implements what we call the first step. Here there are two areas to be noted: First, we usedAndTags are used to split the Table title and the parts to be sorted. HTML code is not displayed due to the length. Second, javaScript advanced programming says that the tBodies attribute of Table is a set in JS, instead of arrays, there is no sort () method, so it cannot be used for direct sorting. We still need to study the concept of JS sets, but this is not the focus of this article, here we want to explain that tBodies cannot be sorted directly.
Line 13-22 of the program implements Step 3. Here we hide the specific implementation of step 2 (which will be described in detail later). We think this will better illustrate our ideas, instead of leaving yourself entangled in the implementation of specific methods, resulting in no overall understanding of the program. It should also be noted that a global container is used in the program to load the sorting rows. Therefore, after the function is executed, arrayTr will always contain the row reference sequence of the last sorting, in this case, if we want to reverse the order, we only need to call the reverse () method, instead of reverse sorting the array.
The 24 lines of the program use document. createDocumentFragment () to get a File Fragment. documentFragment is an incomplete document object, which is mainly used to store elements that are not added to the dom tree. It is very useful to operate the dom cache as js. It will render changes in the DOM at one time, instead of re-painting the DOM on the client every time.
The following describes how to implement the function in step 2:
1 /**
2 * comparison functions
3 * @ param {Object} param1 the row 1 to be compared
4 * @ param {Object} param2 the row 2 to be compared
5 * @ return {Number} If param1> param2 returns 1
6 * If param1 = param2, 0 is returned.
7 * If param1 <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 strings
13 if (isNaN (param1) & isNaN (param2 )){
14 return param1.localeCompare (param2 );
15}
16 // If parameter 1 is a number and parameter 2 is a string
17 if (! IsNaN (param1) & isNaN (param2 )){
18 return-1;
19}
20 // If parameter 1 is a string and parameter 2 is a number
21 if (isNaN (param1 )&&! IsNaN (param2 )){
22 return 1;
23}
24 // if both parameters are numbers
25 if (! IsNaN (param1 )&&! IsNaN (param2 )){
26 if (Number (param1)> Number (param2) return 1;
27 if (Number (param1) = Number (param2) return 0;
28 if (Number (param1) <Number (param2) return-1;
29}
30} for specific explanations of the above Code, refer to array sorting and the use of localeCompare () method in Chinese Character sorting. because we only changed the Data Retrieval Method in 10 and 11 rows.
The above describes the sorting ideas and methods for Single-Column tables. With these ideas, we can easily expand our programs to achieve more table sorting functions.

The above is the content of the JavaScript learning notes (4) Table sorting. For more information, see PHP Chinese website (www.php1.cn )!