I have a table that is made in the $( document ).ready 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.
HTML
<head>
<link rel=stylesheet type=text/css href=/path/to/css/jquery.dataTables.css>
<script type=text/javascript charset=utf8 src=/path/to/js/jquery.dataTables.js></script>
</head>
<div class=col-sm-12 id=ovs-sum>
<table class=table table-striped id=summary-table>
<thead>
<tr>
<th>Order</th>
<th>Planner</th>
<th>Vendor</th>
<th>SKU</th>
<th>Description</th>
<th>Quantity</th>
<th>PO Date</th>
<th>PO Tracking</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS/jQuery (scripts.js)
$ ( document ).ready(function() {
$.ajax({
type: 'GET',
url: 'models/summary.php',
mimeType: 'json',
success: function(data) {
$.each(data, function(i, data) {
var body = <tr>;
body += <td> + data.name + </td>;
body += <td> + data.address + </td>;
body += <td> + data.phone_no + </td>;
body += <td> + data.birthday + </td>;
body += <td> + data.color + </td>;
body += <td> + data.car + </td>;
body += <td> + data.hobbies + </td>;
body += <td> + data.relatives + </td>;
body += </tr>;
$( body ).appendTo( $( tbody ) );
});
},
error: function() {
alert('Fail!');
}
});
/*DataTables instantiation.*/
$( #summary-table ).DataTable();
}
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..
This problem exists in IE, Chrome, and FireFox. Here is what I've tried so far:
-I've tried Placing the $( #summary-table ).DataTable(); before my AJAX call. That did not work.
-I tried to replace $( body ).appendTo( $( tbody ) ); with $( tbody ).append( body );`. That did not work.
-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.
How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?
