title: JQuery Mobile Table Reflow issue while dynamically create table
body: <p>I am new in Jquery Mobile and currently I am facing issue when I am loading a data dynamically using Jquery in 'table using reflow'. The issue is only one header column is displayed even I called $(table).refresh(). First, I use Jquery Mobile 1.3.1 then change to JQuery Mobile 1.4.5 but issue not resolved. Initially, I add table thead in html just to check if this was the issue, then I put/load it in the javascript Below is the HTML code::</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
      &lt;!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
      &lt;link rel="stylesheet" href="css/custom.css"/&gt;
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/&gt;     
  
      &lt;script src="js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Start of first page --&gt;
      &lt;div data-role="page" id="login-form"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Header1&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="div-content" name="div-content" role="main" class="ui-content"&gt;
              &lt;form id="div-content-form" name="div-content-form" action="index.html"&gt;
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="applicantNos"&gt;Applicant Nos:&lt;/label&gt;
                      &lt;input type="text" id="applicantNos" name="applicantNos" required="required" /&gt;
                  &lt;/div&gt;
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="idNos"&gt;ID Nos:&lt;/label&gt;
                      &lt;input type="text"  id="idNos" name="idNos" required="required" /&gt;
                  &lt;/div&gt;
                  &lt;input type="button" value="Submit" class="button" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Start of second page --&gt;
      &lt;div data-role="page" id="application-status" data-add-back-btn="true"&gt;
          &lt;div data-role="header"&gt;
              &lt;h4&gt;Application Status&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="application-status-content" name="application-status-content" role="main" class="ui-content"&gt;
              &lt;table data-role="table" id="app-status-table" data-mode="reflow" class="ui-responsive table-stroke"&gt;
                  &lt;thead&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          app.initialize();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript code:</p>
  
  <pre><code>var app = {
  initialize: function() {
      this.bindEvents();
  },
  // Bind Event Listeners
  //
  // Bind any events that are required on startup. Common events are:
  // 'load', 'deviceready', 'offline', and 'online'.
  bindEvents: function() {
      document.addEventListener('deviceready', this.onDeviceReady, false);
  },
  // deviceready Event Handler
  //
  // The scope of 'this' is the event. In order to call the 'receivedEvent'
  // function, we must explicitly call 'app.receivedEvent(...);'
  onDeviceReady: function() {
  
      $(document).ready(function () {
          $('.button').click(function() {
              event.preventDefault();
              var applicantNos = $('#applicantNos').val().trim();
              var idNos = $('#idNos').val().trim();
              if (applicantNos != '' &amp;&amp; idNos != '')   {
                  $.ajax({
                      url: "http://localhost:8083/fetchDetails",
                      type: "POST",
                      data: {
                          applicantNos : applicantNos,
                          idNos: idNos
                      }
                  })
                  .done(function(responseData){
                       $.mobile.changePage("#application-status", {
                          respData: responseData,
                          transition: "flip"
                       });
                  })
                  .fail(function(msg) {
                      alert(msg.responseText);
                  });
              }
          });
  
          $(document).on("pagebeforechange", function (e, data) {
              if (data.toPage[0].id == "application-status") {
                  showAppStatusData(data.options.respData);
              }
          }); 
  
          function showAppStatusData(data) {
              var pageData = data;
              var tHead = $('table#app-status-table thead');
  
              tHead.append($("&lt;tr&gt;&lt;th data-priority='1'&gt;Application No.&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='2'&gt;Column 2&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='3'&gt;Column 3&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='4'&gt;Column 4&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='5'&gt;Column 5&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='6'&gt;Column 6&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='7'&gt;Column 7&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='8'&gt;Column 8&lt;/th&gt;"));
              tHead.append($("&lt;th data-priority='9'&gt;Column 9&lt;/th&gt;&lt;/tr&gt;"));
  
              var tBody = $('#app-status-table tbody');
              tBody.append($("&lt;tr&gt;&lt;td&gt;" + data.applicationNos + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column2 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column3 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column4 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column5 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column6 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column7 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column8 + "&lt;/td&gt;"));
              tBody.append($("&lt;td&gt;" + data.column9 + "&lt;/td&gt;&lt;/tr&gt;"));
  
              // $("#app-status-table").append(tHead).append(tBody);
  
              $("#app-status-table").table("refresh");
              //tHead.closest("table#app-status-table").table("refresh").trigger("create");
              //tBody.closest("table#app-status-table").table("refresh").trigger("create");
          }
      });
  }
  </code></pre>
  
  <p>};</p>
  
  <p>Attach a ripple emulator snapshot which displays only first column header , Body is diplayed perfectly. Even I added the table 'thead' in HTML code but this also not works!<img src="https://i.stack.imgur.com/VwffG.png" alt="enter image description here"></p>
  
  <p>Is this issue related to this link:
  <a href="https://github.com/jquery/jquery-mobile/pull/6007/files" rel="nofollow noreferrer">https://github.com/jquery/jquery-mobile/pull/6007/files</a></p>
  
  <p>Please provide the solution to resolve as i spent complete 1 day on this.
  Thanks</p>