在数据表构建/初始化数据表时显示微调器答案

【问题标题】：Show spinner while datataables builds/init dataTable在数据表构建/初始化数据表时显示微调器
【发布时间】：2020-01-14 09:12:53
【问题描述】：

所以我使用数据表来格式化由 Coldfusion 生成的表。所以表格首先生成为 html（说它本来可以使用 PHP 完成以使这更容易）

<table id="table" class="table table-bordered" style="width:100%">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>
<script>
    $(document).ready(()=>{
        $("#table").dataTable({scrollY: 500})
    })
</script>

但是这个表就像 10000 - 15000 条记录和数据表在最终格式化之前需要一些时间。我在页面中有一个覆盖加载器/微调器。现在，当数据表完成创建/格式化表时，我如何显示微调器并隐藏它？我尝试了一堆数据表的回调，比如initComplete 这样的回调

$(".load-overlay").show()
$('#table').dataTable({scrollY: 500,
    "initComplete": function(settings, json) {
        $(".load-overlay").hide();
      }
});

但这不起作用，因为微调器短暂显示并在 dataTables 构建 DataTable 之前被隐藏。

【问题讨论】：

xy 问题，为什么要加载 10-15k 的记录？
微调器没有按预期显示，因为您没有使用异步逻辑来加载数据，这一切都是同步完成的，因为在页面加载时行是 HTML 的一部分。快速而肮脏的解决方法是将dataTable() 调用放入setTimeout() 中，延迟20 毫秒。更好的解决方法是更改您的 dataTables 实现以通过 AJAX 从页面中读取服务器中的所有数据。
@RoryMcCrossan 我已经实现了你对setTimeout() 的建议我只是好奇是否有更好的dataTables 方式，因为这个表的大小是不可预测的，我不想猜测超时的持续时间。我还尝试setInterval 每 100 秒检查一次以检查数据表是否已构建，然后清除它，这似乎工作正常，只是想看看是否还没有内置函数跨度>
20ms 超时不是基于表的大小。
@SASSY_ROG 正如@freedomn-m 所说，延迟与表的大小无关，它是在绘制 DT 时强制逻辑异步运行。不要为此使用setInterval()。没有内置方法可以满足您的要求，主要是因为您不应该在单个表中拥有 10,000 条记录，更不用说 15,000 条了。更好的方法是通过 AJAX 在分页“块”中从服务器端加载数据。 DT 已经设置为以这种方式工作：datatables.net/examples/data_sources/ajax

标签： jquery html datatables

【解决方案1】：

上面关于通过 ajax 加载表格的 cmets 是准确的。 DT 确实需要相当长的时间来初始化一个大表，并且在初始化 DT 之前让浏览器将整个内容加载到 DOM 中，这真的很慢而且用户体验也不是很好。

您可以将表格转换为使用ajax 数据源，这比直接加载它要快。这将在后台将整个数据集作为 JSON blob 加载，并且仅呈现用户选择的行数。在您获得非常大的数据集之前，这工作正常，并且加载大量 JSON blob 成为其自身的性能损失。此时，您想查看server side processing。实施起来更具挑战性，因为您必须将所有搜索（以及排序）作为数据查询的一部分处理，但它允许您一次仅加载 10/25/50 条记录，这使得它快得多。使用这些选项中的任何一个，DataTables 都会显示自己的“正在加载”消息。

现在，假设您正在处理一个足够小的数据集，或者出于某种原因您确实需要一次加载整个表。这就是我所做的让它隐藏表格直到它准备好：

首先，默认隐藏数据表，并在其位置显示一个微调器：

<table id="datatable" style="display:none">...</table>
<div id="dt_loader" class="spinner"></div>

然后，在您的 JS 中，调用 DataTable() 后，隐藏微调器并显示表格：

$('#dataTable').DataTable(options);
$('div#dt_loader').hide();
$('#dataTable').show();

【讨论】：

未捕获的类型错误：table.show 不是函数。
感谢您指出这一点，我更新了 sn-p。我删除了使 dataTable 成为 jQuery 对象的代码，没有意识到我在这个 sn-p 中是这样对待的。