jQuery DataTables“表中没有可用数据”
Posted
技术标签:
【中文标题】jQuery DataTables“表中没有可用数据”【英文标题】：jQuery DataTables "No Data Available in Table" 【发布时间】：2015-12-27 10:19:47 【问题描述】：我有一张在$( document ).ready 函数中创建的表格。我也在使用 jQuery DataTables 插件。出于某种原因，当页面加载时，表格会加载，但第一行显示“表格中没有可用数据”。
<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 处理我当前的数据？我忽略了哪些潜在错误？
【问题讨论】：
【参考方案1】：请在将 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!');
);
);
希望，这会有所帮助！
【讨论】：
完美！为什么呢？请指出我可以阅读的方向，了解为什么会这样？很棒的解决方案！ Abhjeet，您能否解释一下它是如何/为什么起作用的。 datatables.net 上的所有示例都没有这样的结构。谢谢！ 这是有效的，因为在DataTables 插件被初始化之前，它需要一个充满数据的表才能存在于 DOM 中。同样适用于其他 JS 插件。在 DOM 上的任何选择器上启动插件之前，该选择器必须存在并带有正确的数据。还有另一种使用DataTables 的方法，即使用来自DataTables 插件的服务器端请求。当您有大量数据要填充表格时，这种方式将是您唯一的选择。供您参考：Server-side calls
@Abhijeet K 完美解决方案【参考方案2】：
通过 AJAX 将数据加载到 DataTable 时，只需使用 here 中记录的 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() 方法。
【讨论】：
以上是关于jQuery DataTables“表中没有可用数据”的主要内容，如果未能解决你的问题，请参考以下文章
JQuery插件之Jquery.datatables.js用法及api