title: Tablesorter pager not working
body: <p>I am developing android app using Jquery Mobile.
  I am having some problem with tablesorter plugin with pager.</p>
  
  <p>Here is my HTML page</p>
  
  <pre><code>    &lt;div id="mainPager" class="pager"&gt;
      &lt;form&gt;
  
      &lt;div class="ui-grid-d"&gt;
          &lt;div class="ui-block-a"&gt;&lt;input type="button" data-inline="true" data-mini="true" value="&amp;lt;&amp;lt;" class="first" /&gt;&lt;/div&gt;
          &lt;div class="ui-block-b"&gt;&lt;input type="button" data-inline="true" data-mini="true" value="&amp;lt;" class="prev" /&gt;&lt;/div&gt;
          &lt;div class="ui-block-c"&gt;&lt;input type="text" data-inline="true" data-mini="true" class="pagedisplay"/&gt;&lt;/div&gt;
          &lt;div class="ui-block-d"&gt;&lt;input type="button" data-inline="true" data-mini="true" value="&amp;gt;" class="next" /&gt;&lt;/div&gt;
          &lt;div class="ui-block-e"&gt;&lt;input type="button" data-inline="true" data-mini="true" value="&amp;gt;&amp;gt;" class="last" /&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;select class="pagesize"&gt;
              &lt;option selected="selected"  value="10"&gt;10&lt;/option&gt;
  
              &lt;option value="20"&gt;20&lt;/option&gt;
              &lt;option value="30"&gt;30&lt;/option&gt;
              &lt;option value="40"&gt;40&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;table class="myTable" id="dataTable" &gt;
    &lt;thead&gt;
  
      &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;/tbody&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>This is my jquery code.</p>
  
  <pre><code>  $(document).on('pagebeforecreate', '#main' ,function(){       
  
      fillRoTable() ;    
  
      });
  
  
  
    function fillRoTable() 
    { 
  
     var html = '';
       for (var key=0, size= 1; key&lt;size;key++) {
        html += '&lt;tr&gt;&lt;th&gt;'
           + "Ticket #"
           + '&lt;/th&gt;&lt;th&gt;'
           + "Action"
           + '&lt;/th&gt;&lt;/tr&gt;';
        }
  
      $('#dataTable thead').append(html);
  
  
      $.ajax({url: "h**p://xyz.com/test/info?client=ig&amp;docId=2313",
      dataType: "jsonp",
      async: true,
      success: function (result) { 
  
  var html1 = '';
  for (var key=0, size=25; key&lt;size; key++) {
  
  html1 += '&lt;tr&gt;&lt;td&gt;'
           + key
           + '&lt;/td&gt;&lt;td&gt;'
           + (size-key)
           + '&lt;/td&gt;&lt;/tr&gt;';
  }
  
  $('#dataTable tbody').append(html1);
  
  
                $("#dataTable").tablesorter()
      .tablesorterPager({container: $("#MainPager"), positionFixed: false});    
  
  
  
      },
      error: function (request,error) {
          alert('Network error has occurred please try again!');
      }
   });   
  
  }
  </code></pre>
  
  <p>Now my problem is that when main page loads everything is looking fine but if I tap on one of the heading to sort the column then I table becomes empty.</p>
  
  <p>Can anyone suggest me what am I doing wrong here.</p>
  
  <p>Thanks</p>