gpt4 book ai didi

javascript - 数据表 - 在加载完整数据集时预加载第一页数据

转载 作者:行者123 更新时间:2023-11-29 14:57:47 24 4
gpt4 key购买 nike

我正在寻找以前做过类似事情的人的一些建议:

我正在使用 datatables.js 来显示大约 10,000 行的完整表格,因此它加载缓慢(5-7 秒)并提供“脚本没有响应”弹出窗口 - 不是一个好的用户体验

我希望加载完整的数据集以使用内置的搜索过滤器以及一些自定义过滤器,因此 ajax 抓取分页、过滤器等数据是不可取的。 (我们喜欢这种敏捷,一旦加载数据,过滤可能会非常激烈)

我已经做了一些实验并认为也许:

--加载只有几条记录的第一页-- 同时,在页面加载时执行后台 ajax 调用以构建第二个完整表-- 最后,当数据存在时,用 ajax 构建的表替换初始表-- 可能需要重新绑定(bind)一些东西

在花费所有时间进行设置和检查之前,有没有人这样做过或可以提供不同的建议?

TIA,

杰夫

最佳答案

正如@yuwang 所说,这就是数据表的工作方式。我们自己也遇到过这个问题 - 问题是 DataTables 的初始化速度非常慢,大约 4000 条记录似乎是大多数浏览器的障碍。在我们的应用程序中,我只是将限制设置为 4000 - DataTables View 主要是为了方便,人们可以进行更窄的搜索。服务器端处理不是真正的解决方案。

关于“只用几条记录加载第一页——同时,在页面加载时执行后台 ajax 调用以构建第二个完整表”,试试这个:

server.php,如果只加载前 100 条记录,则调用 brief=yes

<table id="test-table">
<thead>
<th>id</th>
<th>date</th>
<th>text</th>
</thead>
<tbody>
<?
function getColumn() {
$row='<tr>';
$row.='<td>'.rand(1, 100000).'</td>';
$row.='<td>'.date("Y-m-d H:i:s", mt_rand(1232055681, 1762855681)).'</td>';
$row.='<td>'.str_shuffle('abcdefghijklmnopqr').'</td>';
$row.='</tr>';
return $row;
}
$count=(isset($_GET['brief'])) ? 100 : 10000;
for ($i=0;$i<$count;$i++) {
echo getColumn();
}
?>
</tbody>
</table>

完整的示例(复制和粘贴)

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'server.php?brief=yes',
success : function(html) {
$('#table-container').html(html);
$("#test-table").DataTable();
$.ajax({
url: 'server.php',
success : function(html) {
$('#table-container').html(html);
$("#test-table").DataTable();
}
});
}
});
});
</script>
</head>
<body>
<div id="table-container"></div>
</body>
</html>

当然,在 server.php 中,记录的内容总是会发生变化,当您从数据库(或其他)加载记录时,情况就不会这样了

关于javascript - 数据表 - 在加载完整数据集时预加载第一页数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15102412/

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