DataTables表加载Ruby on Rails时显示微调器
使用Rails我已经构建了一个Web应用程序。 Web应用程序的其中一个页面显示一个使用DataTables API的表。 这个JSFiddle显示了我的Web应用程序的样子。
这个问题是，当我开始添加大量数据（当前测试数据是1500行）时，表在运行javascript之前先加载每一行，这意味着在Javascript启动之前，您会获得一个未格式化的表几秒钟和DataTables激活。
我希望显示一个微调器或处理消息（沿着这些线的东西）代替表，直到页面完全填充，一旦完成，我想运行我的javascript激活DataTables。
编辑：我的主要问题是我不知道如何在表加载时使用Javascript显示微调器，但是一旦页面加载完成后再更改为表
我的代码如下：
HTML / ERB
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Header 9 Header 10
使用Javascript
$(document).ready(function() { var table = $('#app-list-table').DataTable({ "scrollX": true }); });
如果您还有其他任何想要我加入，请告诉我。
你可以添加一个微调器gif（在这里找到一个： http ： //www.ajaxload.info/ ）作为你的表所在的div ，然后在使用initComplete加载表时清除它。
把这样的东西放在
：
然后像这样调用你的表：
$(document).ready(function() { var table = $('#app-list-table').DataTable({ //any other datatables settings here "initComplete": function(settings, json) { $('#loadingSpinner').hide(); //or $('#loadingSpinner').empty(); } }) });
如果数据是在Ruby中加载的，那么加载微调器是没有意义的，因为那时数据已经加载了。 这是对Rails应用程序中发生的事情的简单排序：
- Controller然后查看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。
如果您正在寻找隐藏数据表的方法，直到它准备就绪，可以通过将数据表放在最初设置为display：none的div中，然后在初始化数据表后显示div来实现。我还在整个页面上加入了一个不透明的叠加div，同时加载数据表并延迟500毫秒以强制加载效果。
This div / overlay contains a loading message / image and can be styled however you like 
我使用了下面链接提供的代码，但是如果使用旧的jquery版本，你应该使用最新的（3.x），否则Datatables会崩溃。 希望这有帮助
http://bradsknutson.com/blog/display-loading-image-while-page-loads/