title: jQuery: Sort table by multiple column values
body: <p>I've been struggling with this for a while and every time I test something I just end up getting different results.</p>
  
  <h1><a href="https://jsfiddle.net/nf2zm3eo/12/" rel="nofollow noreferrer">JSFIDDLE</a></h1>
  
  <p>I have a basic table for test purposes with 3 entries that have 3 different headings to be sorted by: Name, Age, Date Joined. </p>
  
  <p>Here is the table:</p>
  
  <pre><code>&lt;table class="table"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;#&lt;/th&gt;
      &lt;th scope="col" id="firstName"&gt;name&lt;/th&gt;
      &lt;th scope="col" id="age"&gt;age&lt;/th&gt;
      &lt;th scope="col" id="date"&gt;date joined&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;1&lt;/th&gt;
      &lt;td class="firstName"&gt;Mark&lt;/td&gt;
      &lt;td&gt;12&lt;/td&gt;
      &lt;td&gt;12/02/2006&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;2&lt;/th&gt;
      &lt;td class="firstName"&gt;Jacob&lt;/td&gt;
      &lt;td&gt;30&lt;/td&gt;
      &lt;td&gt;03/04/2018&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;3&lt;/th&gt;
      &lt;td class="firstName"&gt;Larry&lt;/td&gt;
      &lt;td&gt;22&lt;/td&gt;
      &lt;td&gt;07/01/2009&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my JS:</p>
  
  <pre><code>function sortTable(column) {
          var $tbody = $('.table tbody');
          $tbody.find('td.' + column).sort(function(a,b){ 
              var tda = $(a).find('td:eq(1)').text();
              var tdb = $(b).find('td:eq(1)').text();
                      // if a &lt; b return 1
              return tda &lt; tdb ? 1 
                     // else if a &gt; b return -1
                     : tda &gt; tdb ? -1 
                     // else they are equal - return 0    
                     : 0;           
          }).appendTo($tbody);
  }
  
  $('#firstName').click(function() {
      sortTable("firstName");
  });
  $('#age').click(function() {
      sortTable("age");
  });
  $('#date').click(function() {
      sortTable("date");
  });
  </code></pre>
  
  <h1>What I am trying to achieve</h1>
  
  <p>I want to be able to click each of the headers to sort the table by its respective content. So for example, when I click name it will sort by name. When I click age it will sort by age and when I click date joined it will sort by date. </p>
  
  <p>I also really want to learn so I will give 100 bonus points for an answer that has good comments that can explain for me what is going on. </p>
  
  <p>Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function sortTable(column) {
    var $tbody = $('.table tbody');
    $tbody.find('td.' + column).sort(function(a, b) {
      var tda = $(a).find('td:eq(1)').text();
      var tdb = $(b).find('td:eq(1)').text();
      // if a &lt; b return 1
      return tda &lt; tdb ? 1
        // else if a &gt; b return -1
        :
        tda &gt; tdb ? -1
        // else they are equal - return 0    
        :
        0;
    }).appendTo($tbody);
  }
  
  $('#firstName').click(function() {
    sortTable("firstName");
  });
  $('#age').click(function() {
    sortTable("age");
  });
  $('#date').click(function() {
    sortTable("date");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;#&lt;/th&gt;
        &lt;th scope="col" id="firstName"&gt;name&lt;/th&gt;
        &lt;th scope="col" id="age"&gt;age&lt;/th&gt;
        &lt;th scope="col" id="date"&gt;date joined&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th scope="row"&gt;1&lt;/th&gt;
        &lt;td class="firstName"&gt;Mark&lt;/td&gt;
        &lt;td&gt;12&lt;/td&gt;
        &lt;td&gt;12/02/2006&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th scope="row"&gt;2&lt;/th&gt;
        &lt;td class="firstName"&gt;Jacob&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
        &lt;td&gt;03/04/2018&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th scope="row"&gt;3&lt;/th&gt;
        &lt;td class="firstName"&gt;Larry&lt;/td&gt;
        &lt;td&gt;22&lt;/td&gt;
        &lt;td&gt;07/01/2009&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>