gpt4 book ai didi

javascript - jQuery 数据表 "No Data Available in Table"

转载 作者:太空狗 更新时间:2023-10-29 16:52:24 25 4
gpt4 key购买 nike

我有一个在 $( 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();
}

DataTables Error

此外,如果我单击列标题上的排序箭头,我的所有数据都会消失,只剩下列标题和“表中没有可用数据”。

该问题存在于 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com