title: DataTable "No data available in table" even if it have data
body: <p>I have to fill a datatable with some data I get from a google spreadsheet, i create the table in HTML and appends the rows with Jquery.</p>
  
  <p>The problem is that when the datatable laods the first row says "No data available in table" even when the nexts rows have data.</p>
  
  <p>This is part of the code Im using</p>
  
  <p>//this function creates table rows and appends it to the table body</p>
  
  <pre><code>function displayUser() {
  
  for (i = 0; i &lt; userList.length; i++) {
      var $tblRow = $('&lt;tr id="row' + i + '"&gt;');
  
      $tblRow.append('&lt;td id="td' + i + '"&gt;' + userList[i][' inv-id']
          + '&lt;/td&gt;');
      $tblRow.append('&lt;td id="td' + i + '"&gt;' + userList[i]['inv-com-name']
          + '&lt;/td&gt;');
      $tblRow.append('&lt;td id="td' + i + '"&gt;' + userList[i]['inv-email']
          + '&lt;/td&gt;');
      $tblRow.append('&lt;td id="td' + i + '"&gt;' + userList[i]['email']
          + '&lt;/td&gt;');
      $tblRow.append('&lt;td id="td' + i + '"&gt;' + '&lt;button onClick="editarUsuario(' + i + ')" class="btn btn-info btn-xs btn-edit"&gt;Edit&lt;/button&gt;'
          + '&lt;/td&gt;');
      $('#tbody').append($tblRow);
  };
  }
  </code></pre>
  
  <p>Also the html code for the table is this</p>
  
  <pre><code>&lt;table id="dtVerticalScrollExample"
              class="table table-striped table-bordered table-sm text-center table-fixed" cellspacing="0"
              width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="th-sm"&gt;ID
                      &lt;/th&gt;
                      &lt;th class="th-sm"&gt;Company
                      &lt;/th&gt;
                      &lt;th class="th-sm"&gt;Email
                      &lt;/th&gt;
                      &lt;th class="th-sm"&gt;User
                      &lt;/th&gt;
                      &lt;th class="th-sm"&gt;Action
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="tbody"&gt;
  
                 *here is where the data is appended*
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/iel6j.png" rel="nofollow noreferrer">Here is a imagen that shows that the table appears to be empty even when the data was appended by the script, the first row is the message of "No data available in table" and says 0 entries below</a></p>
  
  <p>I expect the datatable to load and be filled by the script that get the data from the database. But what actual happens is that the frist row says the datatable is empty but it have data in the nexts rows.</p>