title: Sorting rows in the table as we click on the table header
body: <p>I have a task of sorting the table row in a table. The data in the table is a mixture of everything like date, number, string etc etc. </p>
  
  <p>I have gone through many links where I found some are directed to the ready library. Which is of no use to me. Finally going through lot of things I have made my own using all tits and bits. which is working only for number</p>
  
  <p>This is the script:</p>
  
  <pre><code>  $(document).ready(function () {
  
          //grab all header rows
          $('th').each(function (column) {
              $(this).addClass('sortable').click(function () {
                      var findSortKey = function ($cell) {
                          return $cell.find('.sort-key').text().toUpperCase()+ ' ' + $cell.text().toUpperCase();
  
                      };
                      var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
                      var $rows = $(this).parent().parent().parent().find('tbody tr').get();
  
                      //loop through all the rows and find
                      $.each($rows, function (index, row) {
                          row.sortKey = findSortKey($(row).children('td').eq(column));
                      });
  
                      //compare and sort the rows alphabetically or numerically
                      $rows.sort(function (a, b) {
                          if (a.sortKey.indexOf('-') == -1) {
                              if (parseInt(a.sortKey) &lt; parseInt(b.sortKey)) {
                                  return -sortDirection;
                              }
                              if (parseInt(a.sortKey) &gt; parseInt(b.sortKey)) {                                
                                  return sortDirection;
                              }
                          } else {
                              if (a.sortKey &lt; b.sortKey) {
                                  return -sortDirection;
                              }
                              if (a.sortKey &gt; b.sortKey) {
                                  return sortDirection;
                              }
                          }
                          return 0;
                      });
  
                      //add the rows in the correct order to the bottom of the table
                      $.each($rows, function (index, row) {
                          $('tbody').append(row);
                          row.sortKey = null;
                      });
  
                      //identify the column sort order
                      $('th').removeClass('sorted-asc sorted-desc');
                      var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
                      sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');
  
                      //identify the column to be sorted by
                      $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
                  });
              });
          });
  </code></pre>
  
  <p>This is the style for the document:</p>
  
  <pre><code>    &lt;style&gt;
      root
      {
          display: block;
      }
  
      th.sortable
      {
          color: #666;
          cursor: pointer;
          text-decoration: underline;
      }
  
          th.sortable:hover
          {
              color: black;
          }
  
      th.sorted-asc, th.sorted-desc
      {
          color: black;
          background-color: cadetblue;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>So below is the HTML part.</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th class="sortable"&gt;Name&lt;/th&gt;
              &lt;th class="sortable"&gt;Salary&lt;/th&gt;
              &lt;th&gt;Extension&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Start date (American)&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Bloggs, Fred&lt;/td&gt;
              &lt;td&gt;$12000.00&lt;/td&gt;
              &lt;td&gt;1353&lt;/td&gt;
              &lt;td&gt;18/08/2003&lt;/td&gt;
              &lt;td&gt;08/18/2003&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Turvey, Kevin&lt;/td&gt;
              &lt;td&gt;$191200.00&lt;/td&gt;
              &lt;td&gt;2342&lt;/td&gt;
              &lt;td&gt;02/05/1979&lt;/td&gt;
              &lt;td&gt;05/02/1979&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Mbogo, Arnold&lt;/td&gt;
              &lt;td&gt;$32010.12&lt;/td&gt;
              &lt;td&gt;2755&lt;/td&gt;
              &lt;td&gt;09/08/1998&lt;/td&gt;
              &lt;td&gt;08/09/1998&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Shakespeare, Bill&lt;/td&gt;
              &lt;td&gt;$122000.00&lt;/td&gt;
              &lt;td&gt;3211&lt;/td&gt;
              &lt;td&gt;12/11/1961&lt;/td&gt;
              &lt;td&gt;11/12/1961&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Shakespeare, Hamnet&lt;/td&gt;
              &lt;td&gt;$9000&lt;/td&gt;
              &lt;td&gt;9005&lt;/td&gt;
              &lt;td&gt;01/01/2002&lt;/td&gt;
              &lt;td&gt;01/01/2002&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Fitz, Marvin&lt;/td&gt;
              &lt;td&gt;$3300&lt;/td&gt;
              &lt;td&gt;5554&lt;/td&gt;
              &lt;td&gt;22/05/1995&lt;/td&gt;
              &lt;td&gt;05/22/1995&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>