DataTables 加载和渲染延迟

Posted 2023-05-07

【中文标题】DataTables 加载和渲染延迟

【英文标题】：DataTables Loading and Rendering Delay

【发布时间】：2018-04-26 10:52:24

【问题描述】：

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

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

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

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

我有几个问题；

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

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

【问题讨论】：

数据表是在 DOM 上加载完成的最后一件事。如果您的数据源来自您正在呈现的 html 表，则尤其如此。您需要创建一个隐藏的类，然后在页面加载时将该类设置在表格上。然后在您的 javascript 上，最后一件事是删除该类。从我使用 DT 的这些年开始，没有“内置”功能。你必须手动控制它。

您将看到与任何其他框架插件完全相同的行为，这些插件操纵、更改或重新组织加载到 dom 中的数千个元素。没有例外。对于 DataTables，您的解决方法可能是初始化一个空的 dom <table> 并使用内置的 ajax 加载内容。然后立即显示 DataTable 实例，并将延迟“传递”到行渲染。即没有闪烁，但有一小段时间您可以看到“加载数据”（或 ajax 加载轮或其他）

如果你有一个非常大的 JSON，你可以加载到 myjson.com 我可以使用 bootstrap 4 生成一个示例。

【参考方案1】：

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

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

【参考方案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 行。

【参考方案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();
 );

【讨论】：

初始化隐藏表有副作用。例如columns.adjust()等API方法需要在表格可见后调用。

好点 @Gyrocode.com - 那么将 opacity 设置为 0 会是更好的解决方案吗？