title: jquery plugin, tablesorter pager with multiple tables
body: <p>I'm trying to use the jQuery tablesorter plugin on multiple tables with asp.net/mvc3.  I'm following this tutorial:
  <a href="http://weblogs.asp.net/hajan/archive/2011/02/09/table-sorting-amp-pagination-with-jquery-in-asp-net-mvc.aspx" rel="nofollow">http://weblogs.asp.net/hajan/archive/2011/02/09/table-sorting-amp-pagination-with-jquery-in-asp-net-mvc.aspx</a></p>
  
  <p>I have 2 different tables on my page.  I'd like to have the ability to set the number of rows for each table using this plugin.  One problem I have is the tables by default have the number of rows shown by the first table.  Then I'm able to use the plugin on each table.  So for example, below table 1, I have this:</p>
  
  <pre><code>&lt;div id="pagerOwnerRequests"&gt;
      &lt;form&gt;
          &lt;select id="selectOwnerRequests" class="pagesize"&gt;
          @*&lt;select id="selectOwnerRequests" class="pagesizeOwnerRequests"&gt;*@
              &lt;option selected="selected" value="0"&gt;0&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below table 2, I have this:</p>
  
  <pre><code>&lt;div id="pagerBoardRequests"&gt;
      &lt;form&gt;
          &lt;select id="selectBoardRequests" class="pagesize"&gt;
              &lt;option selected="selected" value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>At the bottom of my .cshtml file for this page, I have this:</p>
  
  <pre><code>    $(document).ready(function () {
          $("#tbOwnerRequests").tablesorter({
                headers: {
                   6: {
                          sorter: false
                      }
                  }
              }
          ).tablesorterPager({ container: $("#pagerOwnerRequests"), size: $(".pagesize option:selected").val() });
      });
  $(document).ready(function () {
          $("#tbBoardRequests").tablesorter({
                  headers: {
                      7: {
                          sorter:false
                      }
                  }
              }
          ).tablesorterPager({ container: $("#pagerBoardRequests"), size: $(".pagesize option:selected").val() });
      });
  </code></pre>
  
  <p>So what happens when the page load is, because table 1's drop down list is set to 0, both table 1 and table 2 have 0 elements.  then when I manually go in and change the drop down for table 1 or table 2, it updates properly.  I'm not sure why.  I just started using jQuery/html/css so sorry if the answer is obvious, but I can't seem to see it.  TIA.</p>