是否可以在 jQuery-DataTables 中显示来自 HTML 的数据的微调器/加载消息？

Question

我们的服务器正在渲染一个<table>元素，其中包含大约 1000 行 HTML 数据。 客户端 JS 然后从这个HTML 数据初始化 DataTable。 但是，在客户端上大约需要 3-5 秒才能完全初始化 DataTable 并显示分页。 在此期间，完整的 1000 行在 DOM 中呈现并可见。 我没有在 DataTable 文档中找到它，但是有没有办法在处理 dom HTML 的数据表时显示“处理”消息或微调器？

这样的选项可用于 ajax 或服务器端处理源，但没有找到它用于 HTML 数据源。

Answer 1

您在数据表配置中添加了以下选项。

"processing": true &   oLanguage: {sProcessing: "<div id='loader'></div>"}

假设我们认为您的表 id 是“示例”。

JS代码：

$('#example').DataTable( {

         "processing": true,
        responsive: true,
        oLanguage: {sProcessing: "<div id='loader'></div>"}
});

加载器的 CSS：

 #loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left:200px;
  margin-top:30px;
}   

注意：您已根据数据表调整 css

对于工作示例，您访问以下链接：

http://jsfiddle.net/dipakthoke07/ebRXw/3302/