如何解决DataTables Net，表中没有可用数据，但提供了有效的 JSON
如果您能帮助我理解 DataTables 返回表中无可用数据的原因，我将不胜感激。 JSON 端点位于 https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json
我使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css"
/>
<script
type="text/javascript"
charset="utf8"
src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"
></script>
</head>
<body>
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>myid</th>
<th>myname</th>
</tr>
</thead>
<tfoot>
<tr>
<th>myid</th>
<th>myname</th>
</tr>
</tfoot>
</table>
</body>
<script>
$(document).ready(function () {
$("#example").DataTable({
ajax: {
url:
"https://spreadsheets.google.com/Feeds/list/1YFdhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json",dataType: "jsonp",dataSrc: function (json) {
interim_ = json.Feed.entry;
let rows = [];
for (const i of interim_) {
let row_ = [i.gsx$myid.$t,i.gsx$myname.$t];
console.log(row_);
rows.push(row_);
}
let final_ = { data: rows };
console.log(final_);
return final_;
},},});
});
</script>
</html>
解决方法
您的 final_ 对象的格式不正确，数据表无法识别。
一个简单的数组就足够了。
改为return rows；
关于json vs jsonp - 数据源是json，但jquery足够智能，使用dataType: "jsonp"也将允许json
$(document).ready(function() {
$("#example").DataTable({
ajax: {
url: "https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json",dataType: "jsonp",dataSrc: function(json) {
interim_ = json.feed.entry;
let rows = [];
for (const i of interim_) {
let row_ = [i.gsx$myid.$t,i.gsx$myname.$t];
console.log(row_);
rows.push(row_);
}
//let final_ = {
// data: rows
//};
//console.log(final_);
return rows;
},},});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css" />
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>myid</th>
<th>myname</th>
</tr>
</thead>
<tfoot>
<tr>
<th>myid</th>
<th>myname</th>
</tr>
</tfoot>
</table>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
