title: jQuery DataTables "No Data Available in Table"
body: <p>I have a table that is made in the <code>$( document ).ready</code> function. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the table loads but the first row says "No Data Available in Table".</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="/path/to/css/jquery.dataTables.css"&gt; 
  &lt;script type="text/javascript" charset="utf8" src="/path/to/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  </code></pre>
  
  
  
  <pre><code>&lt;/head&gt;
  
  &lt;div class="col-sm-12" id="ovs-sum"&gt;
  &lt;table class="table table-striped" id="summary-table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Order&lt;/th&gt;
              &lt;th&gt;Planner&lt;/th&gt;
              &lt;th&gt;Vendor&lt;/th&gt;
              &lt;th&gt;SKU&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;PO Date&lt;/th&gt;
              &lt;th&gt;PO Tracking&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>JS/jQuery (scripts.js)</b></p>
  
  <pre><code>$ ( document ).ready(function() {
      $.ajax({
          type: 'GET',
          url: 'models/summary.php',
          mimeType: 'json',
          success: function(data) {
              $.each(data, function(i, data) {
                  var body = "&lt;tr&gt;";
                  body    += "&lt;td&gt;" + data.name + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.address + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.phone_no + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.birthday + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.color + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.car + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.hobbies + "&lt;/td&gt;";
                  body    += "&lt;td&gt;" + data.relatives + "&lt;/td&gt;";
                  body    += "&lt;/tr&gt;";
                  $( body ).appendTo( $( "tbody" ) );
              });
          },
          error: function() {
              alert('Fail!');
          }
      });
  
      /*DataTables instantiation.*/
      $( "#summary-table" ).DataTable();
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6mfmH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6mfmH.jpg" alt="DataTables Error"></a></p>
  
  <p>Also, if I click on the sort arrows on the column headers, all of my data disappears and I'm just left with my column headers and "No data available in table.".</p>
  
  <p>This problem exists in IE, Chrome, and FireFox. Here is what I've tried so far:</p>
  
  <p>-I've tried Placing the <code>$( "#summary-table" ).DataTable();</code> before my AJAX call. That did not work.</p>
  
  <p>-I tried to replace <code>$( body ).appendTo( $( "tbody" ) );</code> with $( "tbody" ).append( body );`. That did not work.</p>
  
  <p>-I googled. A lot of SO questions and other sites that have this issue have a solution related to bad table structure, but I cannot find where my table structure is going wrong. Looking in inspect element, it has my appended rows, plus a bunch of HTML that DataTables produces. No errors in the console.</p>
  
  <p>How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?</p>