Home > Developer > JavaScript
Sample Code for sorting js table fields
As long as this article introduces the sample code for sorting js table fields, you can refer to it for help.
1. Comparison Function Generator:
The Code is as follows:
/**
* Comparison Function Generator
*
* @ Param iCol
* Number of data rows
* @ Param sDataType
* Data Type of the row
* @ Return
*/
Function generateCompareTRs (iCol, sDataType ){
Return function compareTRs (oTR1, oTR2 ){
VValue1 = convert (oTR1.cells [iCol]. firstChild. nodeValue, sDataType );
VValue2 = convert (oTR2.cells [iCol]. firstChild. nodeValue, sDataType );
If (vValue1 <vValue2 ){
Return-1;
} Else if (vValue1> vValue2 ){
Return 1;
} Else {
Return 0;
}
};
}
2. Process and compare character types:
The Code is as follows:
/**
* Field Types for sorting
*
* @ Param sValue
* The default field value is the character type, that is, the comparison ASCII code.
* @ Param sDataType
* The field type only supports the format mm/dd/yyyy or mmmm dd and yyyy (January) for date)
* @ Return
*/
Function convert (sValue, sDataType ){
Switch (sDataType ){
Case "int ":
Return parseInt (sValue );
Case "float ":
Return parseFloat (sValue );
Case "date ":
Return new Date (Date. parse (sValue ));
Default:
Return sValue. toString ();
}
}
3. Main function:
The Code is as follows:
/**
* Sort table columns through the header
*
* @ Param sTableID
* ID of the table to be processed <table id = ''>
* @ Param iCol
* Field column id eg: 0 1 2 3...
* @ Param sDataType
* The data type of this field is int, float, and date. By default, when the string is processed
*/
Function sortTable (sTableID, iCol, sDataType ){
Var oTable = document. getElementById (sTableID );
Var oTBody = oTable. tBodies [0];
Var colDataRows = oTBody. rows;
Var aTRs = new Array;
For (var I = 0; I <colDataRows. length; I ++ ){
ATRs [I] = colDataRows [I];
}
If (oTable. sortCol = iCol ){
ATRs. reverse ();
} Else {
ATRs. sort (generateCompareTRs (iCol, sDataType ));
}
Var oFragment = document. createDocumentFragment ();
For (var j = 0; j <aTRs. length; j ++ ){
OFragment. appendChild (aTRs [j]);
}
OTBody. appendChild (oFragment );
OTable. sortCol = iCol;
}
Encapsulate the above question code into a js file and reference it on the html page.
Test test.html:
The Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Title> sort columns </title>
<Script type = "text/javascript" src = "js/sortTable. js"> </script>
<Body>
<Table border = "1" id = "tblSort">
<Thead style = "color: red; bgcolor: blank">
<Tr>
<Th onclick = "sortTable ('tblsort ', 0);" style = "cursor: pointer"> LastName </th>
<Th onclick = "sortTable ('tblsort ', 1, 'int');" style = "cursor: pointer"> Number </th>
<Th onclick = "sortTable ('tblsort ', 2, 'date');" style = "cursor: pointer"> date </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> A </td>
<Td> 1 </td>
<Td> 5/9/2008 </td>
</Tr>
<Tr>
<Td> B </td>
<Td> 3 </td>
<Td> 6/9/2008 </td>
</Tr>
<Tr>
<Td> D </td>
<Td> 6 </td>
<Td> 5/4/2008 </td>
</Tr>
<Tr>
<Td> E </td>
<Td>-5 </td>
<Td> 5/4/2007 </td>
</Tr>
<Tr>
<Td> H </td>
<Td> 34 </td>
<Td> 5/8/2008 </td>
</Tr>
<Tr>
<Td> C </td>
<Td> 12 </td>
<Td> 1/4/2018 </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
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
