Javascript jQuery DataTables“表中没有可用数据”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32852388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables "No Data Available in Table"
提问by aCarella
I have a table that is made in the $( document ).readyfunction. 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".
我有一个在$( document ).ready函数中制作的表格。我也在使用 jQuery DataTables 插件。出于某种原因，当页面加载时，表格会加载，但第一行显示“表格中没有可用数据”。
HTML
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)
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:
此问题存在于 IE、Chrome 和 FireFox 中。这是我迄今为止尝试过的：
-I've tried Placing the $( "#summary-table" ).DataTable();before my AJAX call. That did not work.
- 我试过$( "#summary-table" ).DataTable();在我的 AJAX 调用之前放置。那没有用。
-I tried to replace $( body ).appendTo( $( "tbody" ) );with $( "tbody" ).append( body );`. That did not work.
- 我试图$( body ).appendTo( $( "tbody" ) );用 $( "tbody" ).append( body );`替换。那没有用。
-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.
-我用谷歌搜索。许多有此问题的 SO 问题和其他站点都有与不良表结构相关的解决方案，但我找不到我的表结构哪里出错了。查看inspect元素，它有我附加的行，以及DataTables生成的一堆HTML。控制台中没有错误。
How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?
如何让 DataTables 处理我当前的数据？我忽略了哪些潜在错误？
回答by Abhijeet K.
Please try to initiate the dataTable after your AJAX loaded table is appended on body.
请尝试在您的 AJAX 加载表附加到正文后启动 dataTable。
$ ( 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!');
}
});
});
Hope, this would help!
希望，这会有所帮助！
回答by holly_whitney
When loading data via AJAX to a DataTable, just use the DataTable row.add() API as documented here.
通过 AJAX 将数据加载到 DataTable 时，只需使用此处记录的 DataTable row.add() API 。
In your AJAX response (assuming you initiated a DataTable called myTable):
在您的 AJAX 响应中（假设您启动了一个名为 myTable 的 DataTable）：
$.each(data, function(i, data) {
myTable.row.add([data.name, data.address,...]);
});
myTable.draw();
I find this method easier because I don't have to build the html - I can just pass an array of data to the row.add() method on my DataTable object.
我发现这种方法更容易，因为我不必构建 html - 我只需将数据数组传递给我的 DataTable 对象上的 row.add() 方法。
