jQuery DataTables"表中没有可用的数据"
aCa*_*lla 4 html javascript ajax datatable jquery
我有一个在$( 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中存在此问题.这是我到目前为止所尝试的:
- 我试过$( "#summary-table" ).DataTable();在我的AJAX调用之前放置它.那没用.
- 我试图$( body ).appendTo( $( "tbody" ) );用$("tbody")替换.append(body);`.那没用.
我用谷歌搜索 很多SO问题和其他有这个问题的网站都有一个与糟糕的表结构相关的解决方案,但我无法找到我的表结构出错的地方.查看inspect元素,它有我附加的行,以及DataTables生成的一堆HTML.控制台中没有错误.
如何让DataTables使用我当前的数据？我忽略了什么潜在的错误？
小智 13
在您的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!');
}
});
});
希望,这会有所帮助!
小智 6
通过AJAX将数据加载到DataTable时,只需使用此处记录的DataTable row.add()API .
在您的AJAX响应中(假设您启动了一个名为myTable的DataTable):
$.each(data, function(i, data) {
myTable.row.add([data.name, data.address,...]);
});
myTable.draw();
我发现这个方法更容易,因为我不需要构建html - 我可以将数据数组传递给我的DataTable对象上的row.add()方法.
| 归档时间： |
|
| 查看次数： |
42967 次 |
| 最近记录： |