topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
professional-javascript-12-TableSortExample5.htm / htm

  <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, vValue2;
          
                              if (oTR1.cells[iCol].getAttribute("value")) {
                                  vValue1 = convert(oTR1.cells[iCol].getAttribute("value"),
                                                sDataType);
                                  vValue2 = convert(oTR2.cells[iCol].getAttribute("value"),
                                                sDataType);
                              } else {
                                  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;
                              }
                          };
              }
             
              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 i=0; i < aTRs.length; i++) {
                      oFragment.appendChild(aTRs[i]);
                  }
         
                  oTBody.appendChild(oFragment);
                  oTable.sortCol = iCol;
              }
  
          </script>
      </head>
      <body>
          <p>Click on the table header to sort.</p>
          <table border="1" id="tblSort">
              <thead>
                  <tr>
                      <th onclick="sortTable('tblSort', 0)" style="cursor:pointer">Type</th>
                      <th onclick="sortTable('tblSort', 1)" style="cursor:pointer">Filename</th>                    
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td value="doc"><img src="images/wordicon.gif"/></td>
                      <td>My Resume.doc</td>
                  </tr>
                  <tr>
                      <td value="xls"><img src="images/excelicon.gif"/></td>
                      <td>Fall Budget.xls</td>
                  </tr>
                  <tr>
                      <td value="pdf"><img src="images/acrobaticon.gif"/></td>
                      <td>How to be a better programmer.pdf</td>
                  </tr>
                  <tr>
                      <td value="doc"><img src="images/wordicon.gif"/></td>
                      <td>My Old Resume.doc</td>
                  </tr>
                  <tr>
                      <td value="txt"><img src="images/notepadicon.gif"/></td>
                      <td>Notes from Meeting.txt</td>
                  </tr>
                  <tr>
                      <td value="zip"><img src="images/zippedfoldericon.gif"/></td>
                      <td>Backups.zip</td>
                  </tr>
                  <tr>
                      <td value="xls"><img src="images/excelicon.gif"/></td>
                      <td>Spring Budget.xls</td>
                  </tr>
                  <tr>
                      <td value="doc"><img src="images/wordicon.gif"/></td>
                      <td>Job Description - Web Designer.doc</td>
                  </tr>
                  <tr>
                      <td value="pdf"><img src="images/acrobaticon.gif"/></td>
                      <td>Saved Web Page.pdf</td>
                  </tr>
                  <tr>
                      <td value="doc"><img src="images/wordicon.gif"/></td>
                      <td>Chapter 1.doc</td>
                  </tr>
              </tbody>
          </table>      
      </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.