可数据对象-在加载完整数据集时预加载数据的第一页
我想从以前做过类似事情的人那里寻求一些建议：
我使用datatables.js来显示一个大约10,000行的完整表，所以它会缓慢地加载(5-7秒)，并给出“脚本没有响应”弹出窗口--这不是很好的用户体验。
我希望加载完整的数据集来使用内置的搜索过滤器以及一些自定义过滤器，因此ajax抓取分页、筛选等方面的数据是不可取的。(我们喜欢这种快速性，一旦加载了数据，过滤可能会非常激烈)
我做了一些实验&认为也许：
--仅用几条记录加载第一个页面？？同时，在页面加载上执行后台ajax调用来构建第二个完整的表--最后，当数据存在时，用ajax构建的单点重新绑定来替换inital表。
在花费所有的时间来建立和检查之前，是否有人曾经这样做过，或者可以提出不同的建议？
蒂娅
杰夫
回答 1
Stack Overflow用户
发布于 2013-06-12 10:26:07
正如@yuwang所说，DataTables就是这样工作的。我们自己也有这方面的问题--问题是DataTables在非主流化方面非常缓慢，而且在大多数浏览器中，大约有4000条记录似乎是障碍。在我们的应用程序中，我只是对4000设置了一个限制-- DataTables视图主要是为了方便，人们只需进行更窄的搜索即可。服务器端处理不是真正的解决方案。
关于“加载只有几条记录的第一个页面--同时，在页面加载上执行后台ajax调用以构建第二个完整表”，请尝试如下：
如果只需要加载前100条记录，则使用brief=yes 调用server.php。
<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中，记录的内容总是会改变的，当您从数据库加载记录(或者其他什么)时，情况就不会是这样了。
https://stackoverflow.com/questions/15102412
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号