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）时，请使用标识为example的元素并将其转换为DataTable。

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

然后，您可以将$('#example').show()添加到代码中，以便在将表格制作成DataTable后再次显示该表格

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

DataTables加载和渲染延迟

3 个答案: