提问人：Martin 提问时间：11/16/2023 最后编辑：Martin 更新时间：11/16/2023 访问量：51
Datatables Ajax 如何将数据追加到现有表数据
Datatables Ajax how to append data to existing table data
问：
Using Datatables 版本 1.11.50
源数据：
我们有一个 SQL 数据集，从大约 10-12 个不同的 [joined] 表中检索到，总共有超过 11,000 行和 40-45 列信息。这相当于超过 500,000 个信息单位。
我们为此拥有的 SQL 非常大，但它运行良好，并且在 MySQL 控制台上，它会在大约 6 秒内执行检索数据。
但是，数据需要在 HTML Javascript Datatable 中呈现，我们之前一直在使用在 HTML 中“构建”数据页面的方法，以便在页面加载时，元素在输出到浏览器并由 Datatables 脚本处理之前填充 ~11,670 行。<table><tr><td>...</td></tr>
开始使用 Ajax：
这显然非常慢，页面加载时间约为 190 秒。因此，我转向使用 AJAX 来调用数据后 HTML 加载;但这带来了我无法解决的其他问题。
当前示例设置如下：
布局示例
Datatables AJAX 参考示例（单独的 JS 文件）：
$(document).ready(function() {
let uniShow = true;
var t = $('#outputList').DataTable({
"ajax": {
"url": "test_ajax.php",
"type": "POST",
"dataSrc": ""
},
stateSave: true,
deferRender: true,
...
... etc. etc.
...
});
});
AJAX PHP 文件示例
<?php
$sqlResult = SQL array of arrays of SQL tables data .
/***
* $sqlResult is the full array of data returned by MySQL
* Typically 11k rows
***/
foreach ($sqlResult as $row){
$output[$loopCounter][] = ""; // counter column.
$output[$loopCounter][] = "<span class='cellValueHider'>".$row['see_id']."</span><a href='/link/". $row['id']."'>". $name."</a>".$campFlag
.$closedFlag.$deletedFlag;
$output[$loopCounter][] = trim($row['town'],' ,');
$output[$loopCounter][] = $row['postcode'];
$output[$loopCounter][] = $row['county'];
.... etc. etc....
}
$result = json_enode($output);
print $result;
?>
HTML 文件表示例：
<body>
<table id="outputList">
<thead><tr>
<th data-count='1' data-priority="1"><!-- auto generated row counter--></th>
<th data-count='2' class='dt-head-center' data-priority="1">Name</th>
<th data-count='3' class='dt-head-center' data-priority="5">Town</th>
<th data-count='4' class='dt-head-center' data-priority="2">Postcode</th>
<th data-count='5' class='dt-head-center' data-priority="5">County</th>
<th data-count='6' class='dt-head-center' data-priority="5">Region</th>
<th data-count='7' class='dt-head-center' data-priority="5">Country</th>
... etc, etc....
<th data-count='44' class='dt-head-center' data-priority="2">Status<BR>(2020)</th>
</tr>
</thead>
<tbody>
<!-- ajax populated here -->
</tbody>
</table>
</body>
经济放缓
上面的系统确实有效，但 AJAX 结果是单个调用块，而不是试图让 AJAX 一次调用 200 行。这使得 Ajax 的速度不比在表页 HTML 加载时加载数据快（大约需要 190 秒）。
问题
如何让数据表 AJAX 调用前 200 行，然后填充它们，同时循环回 AJAX 以调用 next、next、next，直到检索到所有 11k 行？
我只是看不到如何附加 AJAX 数据，并且在 Datatables 文档上找不到任何此类示例。
问题
我似乎不明白的部分是如何告诉 Datatables 对 Ajax 数据进行“分块”？官方文档中的示例和上述链接的问题将 AJAX 呈现为单个调用-检索循环，而不是在数据集耗尽之前的调用循环。
我想调用页面加载的前 2/4/500 条记录，这些记录被处理并放入表中并显示给用户的输出，然后这个 500 行的调用和检索在后台进行，直到全部加载（22-23 个循环）。
相关：
如何让 Ajax 在整个数据块完成加载之前输出 JSON 数据？
或者，如何在不循环无限的情况下循环 AJAX 脚本加载？
这将为用户提供更快的负载。页面的第一次加载将直接来自数据 - 即页面不需要对从 SQL 获取的数据进行排序，它已经处于默认顺序（排序可能会发生在用户按列对数据进行排序时，但这希望在数据收集之后发生）。
更新：
ServersideAJAX 看起来在服务器上非常繁重，并且涉及更多的通信。还有一个次要问题，即一旦数据出现在用户面前，他们将按主要和次要排序列对其进行排序/重新排序，总体而言，感觉数据排序应该在浏览器端进行，而不是对 AJAX 服务器端脚本的持久检索调用。
因此，我可以使用一些 SESSION 数据和计数器来填充服务器端脚本并将其他行输出到 Datatables，但我在这里找不到任何问题，也找不到 Datatables Docs 上关于如何执行此操作的任何文档。
概念：
HTML 页面加载 数据表加载 AJAX 调用 1 - 填充前 X 行 浏览器/页面/表格可供用户使用。 AJAX 调用 2,3,4,.... -重复的 AJAX 调用，直到将 100% 的表数据检索到浏览器中。
例如;我们有 11,600 行 45 列数据。第一个 AJAX 调用 300 行并输出，然后 [立即] 后面的 AJAX 调用将加载接下来的 500 行，依此类推，直到所有 11,600 行都位于数据表中。
如何将以后的 AJAX 调用附加到现有数据表？
答： 暂无答案
评论