title: Sorting multiple tables with tablesorter
body: <p>I'm using the jQuery tablesorter plugin to allow users to sort tables of data on our site.  I recently came across an area where multiple tables using the tablesorter were going to be displayed on the same page, I didn't have any troubles with this and the tablesorter plugin worked great.  We had a request by a few users to be able to sort all tables at the same time, which is fine since the tables all have the same structure just different data in them.  Here is an example for table 1:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;ID&lt;/th&gt;
             &lt;th&gt;Name&lt;/th&gt;
             &lt;th&gt;Age&lt;/th&gt;
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
             &lt;td&gt;1&lt;/td&gt;
             &lt;td&gt;Bob&lt;/td&gt;
             &lt;td&gt;24&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;1&lt;/td&gt;
             &lt;td&gt;James&lt;/td&gt;
             &lt;td&gt;33&lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Example for table 2:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;ID&lt;/th&gt;
             &lt;th&gt;Name&lt;/th&gt;
             &lt;th&gt;Age&lt;/th&gt;
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
             &lt;td&gt;5&lt;/td&gt;
             &lt;td&gt;PJ&lt;/td&gt;
             &lt;td&gt;28&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;1&lt;/td&gt;
             &lt;td&gt;Sue&lt;/td&gt;
             &lt;td&gt;39&lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So as you can see the table are similar but displaying different data.  The problem became how do I allow users to sort all tables at the same time, but let them still sort tables separately as well, since they might want to do that.  We came up with the idea of if they sort the first table on the page we'd like to use that event as our indication they want to sort all the tables on the page in the same sorting structure as the first.  My main question is how would someone go about doing this?  I think I found the best area to make this work, tablesorter widgets, but can't seem to get that last piece of the puzzle in place.</p>
  
  <p>Here is what I currently have for my widget and tablesorter registration code:</p>
  
  <pre><code>$(function() {
  
      $("table:not(:first)").tablesorter();
  
      $.tablesorter.addWidget({
          id: "tableForceSort",
          format: function (table) {
              if (table.config.sortList.length &gt; 0) {
                  $('table:not(:first)').trigger("sorton", table.config.sortList);
              }
          }
      });
  
      $("table:first").tablesorter({
          widgets: ['tableForceSort']
      });
  });
  </code></pre>
  
  <p>As you can see I'm adding the tablesorter to all tables in the page, but doing a separate registration for the first table so that I can add a special widget to that table to force the sort on the rest of the tables on the page.  This all works, the problem appears for me when I actually try to sort the table and it fires the trigger event, this causes the page to break and I can't seem to figure out why.   If anyone has some way to fix this or some other ideas on how to solve this problem please let me know.</p>
  
  <p>Thanks</p>