3

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

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

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

我做了一些实验并认为也许：

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

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

TIA,

杰夫

4

1 回答 1

2

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

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

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

<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 中，记录的内容总是会发生变化，当您从数据库（或其他）加载记录时，情况并非如此

于 2013-06-12T10:26:07.703 回答