tinfanide Posted September 13, 2011 Share Posted September 13, 2011 <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> 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(); } } function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); if (vValue1 < vValue2) { return -1; } else if (vValue1 > vValue2) { return 1; } else { return 0; } }; } 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 [color=#ff0000](oTable.sortCol == iCol) [/color]{ aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for (var i=0; i < aTRs.length; i++) { oFragment.appendChild(aTRs[i]); } oTBody.appendChild(oFragment); [color=#ff0000]oTable.sortCol = iCol;[/color] } </script> </head> <body> <P>Click on the table header to sort in ascending order.</p> <table border="1" id="tblSort"> <thead> <tr> <th onClick="sortTable('tblSort', 0)" style="cursor:pointer">Last Name</th> <th onClick="sortTable('tblSort', 1)" style="cursor:pointer">First Name</th> <th onClick="sortTable('tblSort', 2, 'date')" style="cursor:pointer">Birthday</th> <th onClick="sortTable('tblSort', 3, 'int')" style="cursor:pointer">Siblings</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> <td>7/12/1978</td> <td>2</td> </tr> <tr> <td>Johnson</td> <td>Betty</td> <td>10/15/1977</td> <td>4</td> </tr> <tr> <td>Henderson</td> <td>Nathan</td> <td>2/25/1949</td> <td>1</td> </tr> <tr> <td>Williams</td> <td>James</td> <td>7/8/1980</td> <td>4</td> </tr> <tr> <td>Gilliam</td> <td>Michael</td> <td>7/22/1949</td> <td>1</td> </tr> <tr> <td>Walker</td> <td>Matthew</td> <td>1/14/2000</td> <td>3</td> </tr> </tbody> </table> </body></html> How does "sortCol" work? What is it in JS? Method? Variable? Object?I've checked it by using console.log(typeof sortCol) and it is undefined.Can anyone explain a bit how it works? How does it make the sorting?Online tutorials say that its default value is -1. Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2011 Share Posted September 13, 2011 This is quite complex code. If you're just learning, I don't think you should be analyzing something like this yet. sortCol is a property that they have appended to the table that tells which column the table is currently sorted by. From the look of it, it's just an integer that they're using to identify the column. sortCol is not set until after the first time the table has been sorted. Link to comment Share on other sites More sharing options...
tinfanide Posted September 13, 2011 Author Share Posted September 13, 2011 Is it a build-in property in JS?Any online tutorial covering this? Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2011 Share Posted September 13, 2011 This isn't a built-in property, it's part of their code. There isn't a tutorial for every possible application of Javascript. Each person uses what they know of Javascript (and programming in general) to create something new. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.