title: Issue in footable while adding dynamic data
body: <p>I need a little help in jQuery Mobile <a href="http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/" rel="nofollow noreferrer">Foo Table</a>. 
  I am adding data dynamically in a table.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;table id="tblSRNDetails" class="footable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th data-class="expand"&gt;SRN&lt;/th&gt;
                  &lt;th &gt;Failure Date&lt;/th&gt;  
                  &lt;th &gt;Complaint Report Date&lt;/th&gt;                 
                  &lt;th&gt;Promised Date&lt;/th&gt;  
                  &lt;th &gt;Customer Name&lt;/th&gt;
                  &lt;th &gt;Log Time&lt;/th&gt;
                  &lt;th &gt;Create FSR&lt;/th&gt;    
                  &lt;th  data-hide="phone,tablet"&gt;Days Open&lt;/th&gt;        
                  &lt;th  data-hide="phone,tablet"&gt;SRN Allocated Time&lt;/th&gt;   
                  &lt;th  data-hide="phone,tablet"&gt; SRN Status&lt;/th&gt;  
                  &lt;th  data-hide="phone,tablet"&gt; ESN Number&lt;/th&gt;  
                  &lt;th  data-hide="phone,tablet"&gt; Request Type&lt;/th&gt;    
                  &lt;th  data-hide="phone,tablet"&gt;Service Request Details&lt;/th&gt;                          
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>js code:</p>
  
  <pre><code>$("#page-id").live('pagebeforeshow', function() {
      console.log("Page before show");
      $("#tblSRNDetails &gt; tbody tr").remove();
      for (var indx = 0; indx &lt; 2; indx++ )
      {
          $("#tblSRNDetails &gt; tbody").append("&lt;tr&gt;"+
          "&lt;td&gt;Name&lt;/td&gt;"+
          "&lt;td&gt;failureDate&lt;/td&gt;"+
          "&lt;td&gt;complaintReportDate&lt;/td&gt;"+
          "&lt;td&gt;promisedDate&lt;/td&gt;"+
          "&lt;td&gt;custName&lt;/td&gt;"+
          "&lt;td&gt;&lt;a href='#'&gt;&lt;b&gt;Log Time&lt;/b&gt;&lt;/a&gt;&lt;/td&gt;"+
          "&lt;td&gt;&lt;b&gt;Create FSR&lt;/b&gt;&lt;/td&gt;"+
          "&lt;td&gt;daysOpen&lt;/td&gt;"+
          "&lt;td&gt;allocatedTime&lt;/td&gt;"+
          "&lt;td&gt;srn_status&lt;/td&gt;"+
          "&lt;td&gt;ESNNumber&lt;/td&gt;"+
          "&lt;td&gt;requestType&lt;/td&gt;"+
          "&lt;td&gt;customerComplaint&lt;/td&gt;"+
          "&lt;/tr&gt;");   
      }
      $('#tblSRNDetails').footable();
  });
  </code></pre>
  
  <p>With this FooTable is applied properly when opened for first time. If I click on home page button and go back, and come on that page again, the FooTable is not applied properly.</p>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/GPf5x.png" alt="enter image description here"></p>
  
  <p>So issues I am facing at that time include:</p>
  
  <ol>
  <li><p>Hidden fields are shown. (Means Footable is not applied): 
  This issue gets resolved after changing orientation in device for twice.</p></li>
  <li><p>First field doesn't include Data Expand button anymore (Means Footable is not applied):</p></li>
  </ol>
  
  <p>I think the issue is because I am removing the old rows and adding new ones. I tried without giving remove call. At that time, the old rows were being displayed properly. Newly appended fields were having problems as shown in screenshot.</p>
  
  <p>Can someone help me with this?</p>
  
  <p>P.S: I am rendering this in android webview. And same problem is reproduced in browser, too.</p>