Question

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

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

我希望加载完整的数据集以使用内置的搜索过滤器以及一些自定义过滤器，因此不希望ajax抓取分页，过滤器等数据。（我们喜欢快速，加载数据后过滤可能会非常激烈）

我做了一些实验和实验;想想或许：

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

在花费所有时间进行设置和检查之前，是否有人之前已经做过或者可以提供不同的建议？

TIA，

杰夫

Answer 1

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

关于“加载第一页只有几条记录 - 同时，在页面加载时进行后台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中，记录的内容总是会改变，从数据库（或其他）加载记录时不会出现这种情况

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

1 个答案: