DataTables 加载和渲染延迟

Question

我将 DataTables 与 Bootstrap 4 和客户端处理一起使用。显示大约 2,000 条记录。

加载时间是可以接受的，但是我注意到当我重新加载页面 (F5) 时，我可以在一瞬间看到一个未格式化的 DataTable。几乎就像 DataTables 是最后加载的一样，而且很明显。

如果您查看他们的“零配置”example，您就会明白我的意思。重新加载页面时，您实际上可以在一瞬间看到所有表记录（您必须快！）。

有一个“Bootstrap 4”example，在该页面上也很明显。

我有几个问题；

• 为什么会发生这种情况？
• 我能做些什么来防止它发生吗？

我尝试重新排序我的 JS 和 CSS 文件（我只有几个），但没有任何区别。我担心的是，随着我添加更多记录，加载时间会增加，并且未格式化的 DataTable 在每次页面加载时会更加明显。

Answer 1

有人遇到了完全相同的问题。似乎很常见，特别是 DT

看这里有一个好的答案Datatables - on page load, table layout does not load instantly

Answer 2

在我看来，渲染 2000 行（或更多）的加载时间是不可接受的。即使 PC 和笔记本电脑的加载时间是可以接受的，但在移动设备中处理仍然存在问题。你已经测试了吗？

Datatable 是一个完美的插件，有太多的选择。您可以在第一个视图中仅渲染 10 行，当用户想要查看其他页面时，从 Datatable 请求绘制和渲染它们。所以你需要像这样使用数据属性：

HTML：

    <table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

JS：

var dataSet = new Array();
for(i=0;i<2000;i++){
    var item = new Array(
        "name "+i,
        "position "+i,
        "office "+i,
        "age "+i,
        "start date "+i,
        "salary "+i
    );
    dataSet.push(item);
}

tableMain = $("#example").DataTable({
    data: dataSet,
    columns: [
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true}
    ],
    pageLength: 10
});

正如您所见，通过此方法在 HTML 代码中仅呈现 10 行。

Answer 3

提示在您链接的 Bootstrap 4 示例的代码中。

$(document).ready(function() {
    $('#example').DataTable();
} );

这段代码表明，当文档准备好时（它已经完成了 HTML 和 CSS 的渲染），获取 id 为 example 的元素并将其转换为 DataTable。

为了防止这种情况，您可以将表格的样式设置为display: hidden。

然后你可以在代码中添加$('#example').show()，将表格做成DataTable后再次显示

$(document).ready(function() {
    $('#example').DataTable();
    $('#example').show();
} );