javascript 在 DataTables 表加载 Ruby on Rails 时显示微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31970223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display spinner while DataTables table loads Ruby on Rails
提问by TheFlanman91
Using Rails I have built a web app. One of the pages of the web app displays a table which uses the DataTables API. This JSFiddleshows an example of what my web app looks like.
我使用 Rails 构建了一个 Web 应用程序。Web 应用程序的其中一个页面显示一个使用DataTables API的表。此JSFiddle显示了我的 Web 应用程序的示例。
The problem with this is that when I begin to add in large amounts of data (current test data is 1500 rows), the table loads each row first before running the javascript meaning you get an unformated table for a few seconds before the Javascript kicks in and DataTables activates.
问题在于，当我开始添加大量数据（当前测试数据为 1500 行）时，该表在运行 javascript 之前首先加载每一行，这意味着在 Javascript 启动前几秒钟您会得到一个未格式化的表和数据表激活。
I would like to display a spinner, or processing message (something along those lines) in place of the table until the page has fully populated, once that has finished I would like to run my javascript activating DataTables.
在页面完全填充之前，我想显示一个微调器或处理消息（沿着这些线的东西）代替表格，一旦完成，我想运行我的 javascript 激活 DataTables。
EDIT: My main issue is I'm not sure how to use Javascript to display the spinner while the table loads but then change to the table once the page has finished loading
编辑：我的主要问题是我不确定如何在表格加载时使用 Javascript 显示微调器，但在页面加载完成后更改为表格
My code is as follows:
我的代码如下：
HTML/eRB
HTML/eRB
<div class="list">
<div class="container">
<div class="row">
<div class="col-md-12">
<table id="app-list-table" class="display table" cellspacing="0">
<thead>
<tr class="table-headers">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</thead>
<tbody>
<%= Server.find_each do |server| %>
<tr>
<td><%= link_to(server.server_name, server_path(server)) %></td>
<td><%= server.application %></td>
<td><%= server.server_role %></td>
<td><%= server.team_contact %></td>
<td><%= server.individual_contact %></td>
<td><%= server.business_owner %></td>
<td><%= server.vendor %></td>
<td><%= server.vendor_contact %></td>
<td><%= link_to("Click Here", server.main_doc) %></td>
<td><%= server.main_win %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
Javascript
Javascript
$(document).ready(function() {
var table = $('#app-list-table').DataTable({
"scrollX": true
});
});
Please let me know if there is anything else you would like me to include.
如果您还希望我包含其他任何内容，请告诉我。
回答by jonmrich
You can add in a spinner gif (find one here: http://www.ajaxload.info/) as a divwhere your table should be and then clear it when the table loads using initComplete.
您可以添加一个微调 gif（在此处找到一个：http: //www.ajaxload.info/）作为div您的表格所在的位置，然后在表格加载时使用initComplete.
Put something like this right below <div class="col-md-12">:
把这样的东西放在下面<div class="col-md-12">：
<img id="loadingSpinner" src="/myspinner.gif">
And then call your table like this:
然后像这样调用你的表：
$(document).ready(function() {
var table = $('#app-list-table').DataTable({
//any other datatables settings here
"initComplete": function(settings, json) {
$('#loadingSpinner').hide();
//or $('#loadingSpinner').empty();
}
})
});
回答by eirikir
If the data is loaded in Ruby, there's no point in loading a spinner because the data has already loaded by then. This is a bare-bones ordering of what happens in your Rails app:
如果数据是在 Ruby 中加载的，那么加载微调器就没有意义了，因为到那时数据已经加载了。这是 Rails 应用程序中发生的事情的基本顺序：
- Controller then view Ruby executes, rendering HTML
- HTML is sent to client
- Client requests linked CSS and JS in order
- CSS and JS execute in order
- Asynchronous JS finishes
- 控制器然后查看 Ruby 执行，呈现 HTML
- HTML 被发送到客户端
- 客户端按顺序请求链接的 CSS 和 JS
- CSS和JS按顺序执行
- 异步JS完成
So, the majority of your delay is happening at step 1, but a CSS/JS spinner won't load until step 4. If you want to use a spinner, you need to load the data via async Ajax, so you can load the spinner in 4, then finish loading data and remove spinner in 5. Using jQuery Ajax:
所以，大部分延迟发生在第 1 步，但 CSS/JS 微调器直到第 4 步才会加载。如果你想使用微调器，你需要通过异步 Ajax 加载数据，这样你就可以加载4 中的 spinner，然后完成加载数据并删除 5 中的 spinner。使用 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();
});
You could of course add the spinner to your current code:
您当然可以将微调器添加到您当前的代码中：
var spinner = new Spinner().spin(document.getElementById('spinner'));
$('#app-list-table').DataTable({
…
initComplete: function() { $('#spinner').remove(); }
})
However, again, since most of the delay happens in Ruby, you'll only see the spinner for a brief moment at the end of the delay. To see the spinner for the whole delay, use Ajax.
然而，同样，由于大部分延迟发生在 Ruby 中，因此您只会在延迟结束时看到微调器一小段时间。要查看整个延迟的微调器，请使用 Ajax。
回答by Richard McKechnie
If you are looking for a way to hide the datatable until it's ready, it is possible to do this by putting the datatable inside a div that is initially set to display:none and then showing the div after you've initialised the datatable... I also included an opaque overlay div over the whole page while the datatable(s) are loading and a delay of 500 ms to force the loading effect.
如果您正在寻找一种在数据表准备就绪之前隐藏数据表的方法，可以通过将数据表放在最初设置为 display:none 的 div 中，然后在初始化数据表后显示该 div 来实现此目的。 . 我还在数据表加载时在整个页面上添加了一个不透明的覆盖 div，并延迟了 500 毫秒以强制加载效果。
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$(function(){
function loadDataTable(){
var dataTableId = $('#dataTableId').dataTable({"initComplete": function(settings, json) {$('.overlay').hide();});
$('#divContatingDataTable').show();
};
window.setTimeout(loadDataTable, 500);
});
});
</script><style type="text/css">
.overlay {
background: #ffffff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:100%;
height:100%;
text-align: center;
opacity: 0.8;
}
</style><div class="overlay">
This div / overlay contains a loading message / image and can be styled however you like
<img class="loading" src="loading.gif" />
</div>
<div id="divContatingDataTable" style="display:none;">
<!-- Datatable contents with id dataTableId go here -->
</div>回答by Jcc.Sanabria
Ive used the code provided on the link below, but insteat of using an old jquery version you should use the latest one (3.x), otherwise Datatables will crash. Hope this help
我使用了下面链接中提供的代码，但不要使用旧的 jquery 版本，你应该使用最新的（3.x），否则数据表会崩溃。希望这有帮助
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
