JavaScript Sort table sorting_javascript skills-JS Tutorial-php.cn

1. Do you really understand the Sort method in JavaScript?
2. Do you know the function body of the localeCompare method in JavaScript?
3. What parameters are required for the table sorting method?
The sort method in JavaScript directly provides the sorting function, without the need for us to write a loop to judge one by one. But the mechanism is still the same,

Copy code The code is as follows:

 
window.onload= function(){ 
var MyArr=new Array("red","green","gray"); 
MyArr.sort(); 
alert(MyArr.toString()); 
 } 

The output result is gray, green, red; what if it is an integer?

Copy code The code is as follows:

 
window.onload=function(){ 
var MyArr=new Array(2,25,7); 
MyArr.sort(); 
alert(MyArr.toString()); 
} 

If you think it is 2, 7, 25; then I am happy to say that you are wrong. The result is 2, 25, 7. Why? Because the sort method is judged based on the ASCII of the string, any non-string will be converted to a string first,
and thus the above situation occurs. So what do I do if I want to sort the integers? Conversion is very simple, but what if there are Float, Date, etc.? It's all the same, just write a conversion function. What you say must be done.

Copy code The code is as follows:

 
function convert(DataValue,DataType){ 
switch (DataType){ 
case "int": 
return parseInt(DataValue); 
case "float": 
return parseFloat(DataValue); 
case "date": 
return new Date(Date.parse(DataValue)); 
default: 
return DataValue.toString(); 
} 
} 

A very simple conversion method is It's out. Please pay attention to Date. Because it is an object, it is different from the basic type and a new object will be generated every time.
The Sort method can have a parameter called sortfunction.
Let’s look at a simple sorting method first

Copy the code The code is as follows :

 
function compare_function(value1,value2){ 
if(value1return -1; 
else if(value1>value2) 
return 1; 
else 
return 0; 
} 

In fact, the localeCompare function is similar to it. When value1 is less than value2, -1 is returned, that is, the order is sorted. If value1Back to the point, if you want to sort the table, click on the header of the table to sort. Then there must be a method, which is SortTable. So what parameters do you need to sort a certain column of the table? First, you need a table ID to determine which table. Second, you need to
determine which column to sort. Finally, the data in each column is not necessarily a string, so you need a data type parameter, that is, SortTable(TableID,Col ,DataType);

Copy code The code is as follows:

 
var DTable=document.getElementById(TableID ); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
//Put all rows into the array
for (var i=0;iMyArr[i]=DataRows[i]; 
} 
MyArr.sort(CustomCompare(Col,DataType)); 
 //Create a document fragment and add all the rows to it, which is equivalent to a temporary storage rack. The purpose is (if added directly to document.body, a row will be inserted and refreshed once. If there is too much data, it will affect the user. Experience) 
//First put all the rows in the temporary shelf, and then add the rows in the temporary shelf to document.body, so that the table will only be refreshed once. 
//Just like when you go shopping in a store, you first write down all the items (rows) you want to buy on a list (document fragments), and then buy them all in the supermarket without thinking of just one thing. Then 
 var frag=document.createDocumentFragment(); 
for(var i=0;ifrag.appendChild(MyArr[i]); //Add all rows in the array To the document fragment 
} 
DBody.appendChild(frag);//Add all the lines in the document fragment to the body 

In this way, a sorting can be completed, then there is a CustomCompare function, which is a customized sorting method as the parameter of the Sort method. It has two parameters, one is the sorted column and the other is the data type.
The function body is

Copy code The code is as follows:

return function CompareTRs(TR1, TR2){
var value1,value2;
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType);
value2=convert(TR2.cells[Col].firstChild.nodeValue, DataType);
if(value1 < value2)
return -1;
else if(value1 > value2)
return 1;
else
return 0;
};

Of course, being able to write it in this form is thanks to closures. In the sort method, iterate through each item in the array (each item stores each row of the table) and pass the parameters into CompareTRs(TR1,TR2), and then return the result.
In fact, this is OK, but what if you want to sort the pictures?
What type of picture is it? I don’t know, so let’s try a trick and use the title of the picture or the alt attribute. They can always be strings. Give them a custom property customvalue and sort by its value. Just when implementing
to determine whether it contains this attribute, then the CompareTRs method needs to be modified.

Copy code The code is as follows:

 
function CustomCompare(Col,DataType){ 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
//Determine whether there is a customvalue attribute
if(TR1.cells[Col].getAttribute("customvalue")){ 
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType); 
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 
} 
else{ 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
 } 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 
} 

The sorting of pictures has also been solved. What if the user wants to sort multiple times and click multiple times? Do we still need to modify the CompareTRs method?
Obviously not necessary, there is a reverse() method in JavaScript that can reverse each item in the array. The modification to the SortTable method only needs to be like this

Copy the code The code is as follows:

 
function SortTable( TableID,Col,DataType){ 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
for(var i=0;iMyArr[i]=DataRows[i]; 
} 
//Judge the last sorted column sum Is it the same column this time? 
if(DBody.CurrentCol==Col){ 
MyArr.reverse(); //Invert the array 
} 
else{ 
MyArr.sort(CustomCompare (Col,DataType)); 
} 
//Create a document fragment and add all the lines to it, which is equivalent to a temporary storage shelf. The purpose is (if added directly to document.body, it will be inserted One row will be refreshed once. If there is too much data, it will affect the user experience) 
//First put all the rows in the temporary storage shelf, and then add the rows in the temporary storage shelf to document.body, so that the table only It will be refreshed once. 
//Just like when you go shopping in a store, you first write down all the items (rows) you want to buy on a list (document fragments), and then buy them all in the supermarket without thinking of just one thing. Then 
 var frag=document.createDocumentFragment(); 
for(var i=0;ifrag.appendChild(MyArr[i]); //Add all rows in the array To the document fragment
} 
DBody.appendChild(frag);//Add all the rows in the document fragment to the body
DBody.CurrentCol=Col; //Record the currently sorted column
} 

Be sure to pay attention to the capitalization in JavaScript, as it is easy to make mistakes.
The above code was tested successfully, and the effect of sorting dates is as shown below

All codes:

Copy codeThe code is as follows:

Table sorting

图片排序	整数排序	浮点数排序	字符串排序	日期排序
	2	5.4	zd	2009-10-31 14:33:13
	267	8.9	xx	2002-10-31 14:36:13
	6	60.4	ty	2009-10-31 19:33:13
	9	0.8	lp;	2004-5-31 14:33:13
	34	9.4	cv	1009-10-31 14:33:13
	289	23.4	uio	2005-10-31 14:33:13
	45	89.4	cb	1039-10-31 14:33:13
	2	5.4	zd	2009-10-31 14:33:13
	42	9.3	bm	1069-10-31 14:34:14