Javascript DataTables表加载Ruby on Rails时显示微调器

我使用Rails构建了一个web应用程序。web应用程序的一个页面显示一个表，该表使用。这显示了我的web应用程序的外观示例

问题是，当我开始添加大量数据（当前测试数据为1500行）时，表会在运行javascript之前先加载每一行，这意味着在javascript启动和DataTables激活之前，您会在几秒钟内得到一个未匹配的表

我希望显示一个微调器，或者处理消息（沿着这些行的东西）来代替表，直到页面完全填充完毕，一旦填充完毕，我希望运行javascript激活数据表

编辑：我的主要问题是，我不确定如何在加载表格时使用Javascript显示微调器，但在页面加载完成后，如何更改为表格

我的代码如下：

HTML/eRB

---

请让我知道，如果有什么你想让我包括

您可以将微调器gif（在此处找到：）添加为

div

，在表格应位于的位置，然后在表格加载时使用

initComplete

将其清除

在

的正下方放置类似的内容：

---

如果数据是用Ruby加载的，那么加载微调器就没有意义了，因为那时数据已经加载了。这是Rails应用程序中发生的事情的基本顺序：

控制器然后查看Ruby执行，呈现HTML

HTML被发送到客户端

客户端请求按顺序链接CSS和JS

CSS和JS按顺序执行

异步JS完成

因此，大部分延迟发生在步骤1，但是CSS/JS微调器直到步骤4才会加载。如果要使用微调器，需要通过异步Ajax加载数据，这样就可以在4中加载微调器，然后在5中完成加载数据并删除微调器。使用jQuery Ajax：

var spinner = new Spinner().spin(document.getElementById('spinner'));
$.ajax("/your/data/path.json")
.done(function(data) {
  // load data here, then load table:
  var table = $('#app-list-table').DataTable({ … })
  // remove spinner
  $('#spinner').remove();
});

当然，您可以将微调器添加到当前代码中：

var spinner = new Spinner().spin(document.getElementById('spinner'));
$('#app-list-table').DataTable({ 
  …
  initComplete: function() { $('#spinner').remove(); }
})

---

然而，同样，由于大部分延迟都发生在Ruby中，因此您只能在延迟结束时看到微调器。要查看整个延迟的微调器，请使用Ajax。

如果您正在寻找隐藏数据表直到准备就绪的方法，可以将数据表放在一个div中，该div最初设置为display:none，然后在初始化数据表后显示该div。。。在加载数据表时，我还包括了一个覆盖整个页面的不透明覆盖div，以及一个500毫秒的延迟来强制加载效果

$（文档）.ready（函数（）{
$（函数（）{
函数loadDataTable（）{
var dataTableId=$（'#dataTableId'）.dataTable（{“initComplete”：函数（设置，json）{$（'.overlay'）.hide（）；}）；
$（“#divcontatingdataable”）.show（）；
};
setTimeout（loadDataTable，500）；
});
});

.覆盖{
背景：#ffffff；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
宽度：100%；
身高：100%；
文本对齐：居中；
不透明度：0.8；
}

这个div/overlay包含一个正在加载的消息/图像，可以根据您的喜好设置样式

我使用了下面链接中提供的代码，但是除了使用旧的jquery版本，您应该使用最新的jquery版本（3.x），否则Datatables将崩溃。希望获得此帮助

---

是微调器本身的一个选项。其他一切都取决于您希望它的外观…微调器及其设计不会有多大关系。我的问题是我不知道在页面加载时在哪里添加js代码来显示微调器，然后在完全加载后显示表…抱歉，我没有做到这一点r在我的问题中已经足够了。不幸的是，我自己也有点业余。但我不认为这是DataTables的问题……当我的页面加载时，它在激活DataTables之前填充了整个HTML部分，留下了一个未格式化的表。我认为DataTables正在等待它。而不是相反。数据是如何加载的？它是异步的吗splay the spinner on load，您希望在加载数据之前加载微调器，然后在成功加载数据后将其删除。如问题所示加载数据。它使用嵌入式ruby循环遍历每个对象，并使用对象作为引用填充列。我不确定java脚本和ruby是否异步运行。这很有效非常感谢在加载表后隐藏微调器！谢谢。不过还有一件事是在页面加载时隐藏表，直到DataTables初始化。当页面第一次加载时，是否有javascript函数初始化代码？不幸的是，据我所知，您不能这样做。如果DataTables找不到表，您将得到错误，并且它将不会加载。这包括div是隐藏的还是在事实发生后添加的。我明白了。谢谢您的帮助。没问题。如果答案有帮助，请接受它。谢谢。我将尝试以其他方式隐藏div，但您的微调器实现有帮助。我不想使用AJAX。谢谢您的答案tho啊

<img id="loadingSpinner" src="/myspinner.gif">

$(document).ready(function() {
  var table = $('#app-list-table').DataTable({
    //any other datatables settings here
    "initComplete": function(settings, json) {
      $('#loadingSpinner').hide();
      //or $('#loadingSpinner').empty();
    }
  })
});

var spinner = new Spinner().spin(document.getElementById('spinner'));
$.ajax("/your/data/path.json")
.done(function(data) {
  // load data here, then load table:
  var table = $('#app-list-table').DataTable({ … })
  // remove spinner
  $('#spinner').remove();
});

var spinner = new Spinner().spin(document.getElementById('spinner'));
$('#app-list-table').DataTable({ 
  …
  initComplete: function() { $('#spinner').remove(); }
})