我有一个在$( 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();
放置在前面。但这没起作用。
-我试图用$( "tbody" ).append( body );
代替$( body ).appendTo( $( "tbody" ) );
。但这也没起作用。
-我在谷歌上搜索了很多相关问题的SO问答和其他网站,但它们提供的解决方案都与表格结构有关,但我找不到我的表格结构出了什么问题。在查看元素时,它显示了我添加的行,以及DataTables生成的一大堆HTML代码。控制台没有任何错误。
如何让DataTables与我的当前数据配合使用?我是否忽略了任何潜在的错误?
DataTables
插件之前,DOM中需要存在一个完整的数据表。其他JS插件也是如此。在DOM上对任何选择器启用插件之前,该选择器必须以正确的数据存在。还有一种使用DataTables
的方式,就是通过来自DataTables
插件的服务器端请求进行操作。当您有大量数据要填充表格时,这种方式将成为您的唯一选择。参考:服务器端调用 - Abhijeet K.