【发布时间】：2021-01-22 01:08:39
【问题描述】：
我可以用静态数据很好地填充数据表。但是，当我从 AJAX 检索数据并希望将其实现到表中时，我似乎无法弄清楚。
首先是我的 JSFiddle，它可以完美地处理静态数据，https://jsfiddle.net/L0287qeu/。
这是我当前的 HTML 表代码，在调用检索/加载我想要填充的数据后，它可以完美运行。
<html>
<head>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<title><strong>X, Y, & Z Deliverables</strong></title>
</head>
<body>
<div class="container">
<h4 class="text-center">X, Y, & Z Deliverables</h4>
<table class = "display">
<thead>
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script>
function loadData(source, url) {
return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function () {
Promise.all([
loadData("XDeliverables", "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("YDeliverables", "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("ZDeliverables", "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2,r3);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "</tr>";
}
$(tableContent).appendTo("#deliverables").DataTable();
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
</script>
</body>
</html>
【问题讨论】：
-
无法发现任何可怕的错误，尽管您可能希望使用
</tbody></table>确保 HTML 格式正确。您还需要在附表上调用.DataTable()，例如$(tableContent).appendTo("#deliverables").DataTable(...);。 -
查看我最近的编辑。 Sharepoint 是说 $ 未定义，错误窗口后出现的只是标题
标签： javascript jquery ajax datatable promise