我有一个在 $( document ).ready 函数中制作的表格。我也在使用 jQuery DataTables 插件。出于某种原因，当页面加载时，表格会加载但第一行显示“表格中没有可用数据”。
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();
}
此外，如果我单击列标题上的排序箭头，我的所有数据都会消失，只剩下列标题和“表中没有可用数据”。
该问题存在于 IE、Chrome 和 FireFox 中。到目前为止，这是我尝试过的:
-我试过在我的 AJAX 调用之前放置 $( "#summary-table").DataTable();。那没有用。
-我尝试将 $( body ).appendTo( $( "tbody") ); 替换为 $( "tbody").append( body );`。那没有用。
-我用谷歌搜索。许多 SO 问题和其他有此问题的站点都有与坏表结构相关的解决方案，但我找不到我的表结构出错的地方。查看 inspect 元素，它有我附加的行，以及 DataTables 生成的一堆 HTML。控制台中没有错误。
如何让 DataTables 与我当前的数据一起工作？我忽略了哪些潜在错误？
最佳答案
请在将 AJAX 加载的表附加到正文后尝试启动数据表。
$ ( 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>";
$( "#summary-table tbody" ).append(body);
});
/*DataTables instantiation.*/
$( "#summary-table" ).DataTable();
},
error: function() {
alert('Fail!');
}
});
});
希望，这会有所帮助!
关于javascript - jQuery 数据表 "No Data Available in Table"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32852388/