title: jQuery Tablesorter on two tables
body: <p>For my tables I have a fixed header and scrollable data. This is achived by using two tables and wrapping the data in a div with overflow auto (this is because <code>&lt;tbody&gt;</code> cannot have scrollable attached to it).</p>
  
  <pre><code>&lt;div class="uiGrid"&gt;
      &lt;div class="uiGridHeader"&gt;
          &lt;table&gt;
              &lt;colgroup&gt;
                  &lt;col style="width:29px;text-align:center" /&gt;
                  &lt;col /&gt;
                  &lt;col style="width:100px" /&gt;
                  &lt;col style="width:100px" /&gt;
                  &lt;col style="width:150px" /&gt;
                  &lt;col style="width:46px" /&gt;
                  &lt;col style="width:62px" /&gt;
              &lt;/colgroup&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;&lt;input type="checkbox" id="checkall" /&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;&lt;a href="#"&gt;Name&lt;/a&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;Post Code&lt;/th&gt;
                      &lt;th scope="col"&gt;&lt;a href="#"&gt;SIC Code&lt;/a&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;&lt;a href="#"&gt;&amp;#8470; of Employees&lt;/a&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="uiGridContent"&gt;
          &lt;table class="sortable"&gt;
              &lt;colgroup&gt;
                  &lt;col style="width:29px;text-align:center" /&gt;
                  &lt;col /&gt;
                  &lt;col style="width:100px" /&gt;
                  &lt;col style="width:100px" /&gt;
                  &lt;col style="width:150px" /&gt;
                  &lt;col style="width:46px" /&gt;
                  &lt;col style="width:62px" /&gt;
              &lt;/colgroup&gt;
              &lt;tbody&gt;
                  &lt;!-- DATA ROWS GO HERE --&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>I'm wanting to use something like the jQuery TableSorter plugin: <a href="http://tablesorter.com/" rel="nofollow">http://tablesorter.com/</a> BUT because I have two tables it doesn't work... How would I get it working?</p>
  
  <pre><code>$("table.sortable").tablesorter({
              headers: {
                  0: { sorter: false },
                  5: { sorter: false },
                  6: { sorter: false }
              }
          });
  </code></pre>
  
  <p>Instead I've been trying to bind the two using:</p>
  
  <pre><code>$('table').tablesorter().bind('sortEnd', function ()
          {
              var $cloneTH = $('.uiGridHeader th');
              var $trueTH = $('uiGridContent th');
              $cloneTH.each(function (index) {
                  $(this).attr('class', $($trueTH[index]).attr('class'));
              });
          });
  
          $('.uiGridHeader th').each(function (index) {
              var $cloneTH = $(this);
              var $trueTH = $($('.uiGridContent th')[index]);
              $cloneTH.attr('class', $trueTH.attr('class'));
              $cloneTH.click(function () {
                  $trueTH.click();
              });
          });
  </code></pre>
  
  <p>But still not working...</p>
  
  <p>EDIT:</p>
  
  <p>Based on answer below I have attempted to make it so that it updates the HTML on the fly:</p>
  
  <pre><code>var copyThead = $(".uiGridContent thead").html();
      copyThead = '&lt;table&gt;&lt;thead&gt;' + copyThead + '&lt;/thead&gt;&lt;/table&gt;';
  
      $(".uiGridHeader").html(copyThead);
      $(".uiGridContent table").tablesorter();
      $(".uiGridContent table thead").hide();
  
      $(".uiGridHeader th").click(function () {
  
          // Get updated HTML
          var FindcopyThead = $(".uiGridContent thead").html();
          var NewcopyThead = '&lt;table&gt;&lt;thead&gt;' + FindcopyThead + '&lt;/thead&gt;&lt;/table&gt;';
  
          $(".uiGridHeader").html(NewcopyThead);
  
          var index = $(".uiGridHeader th").index(this);
          var sorting = [[index, 0]];
          $(".uiGridContent table").trigger("sorton", [sorting]);
          return false;
      });
  </code></pre>
  
  <p>But I get an error on the click: <code>Uncaught TypeError: Cannot set property 'count' of undefined</code></p>