Jump to content
tinfanide

Table Sorter (What's Sortcol?)

Recommended Posts

<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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Is it a build-in property in JS?Any online tutorial covering this?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...