使用Rails我已经构建了一个web应用程序。web应用程序的一个页面显示了一个使用DataTables API的表。这个JSFiddle展示了我的web应用程序的一个示例。
这样做的问题是，当我开始添加大量数据(当前测试数据是1500行)时，表在运行javascript之前首先加载每一行，这意味着在javascript启动和DataTables激活之前，你会得到一个未格式化的表几秒钟。
我想显示一个旋转器，或处理消息(沿着那些行)在表的位置，直到页面已经完全填充，一旦完成，我想运行我的javascript激活数据表。
编辑:我的主要问题是我不确定如何使用Javascript显示旋转器，而表加载，但然后改变到表一旦页面完成加载
我的代码如下: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>
$(document).ready(function() {
var table = $('#app-list-table').DataTable({
"scrollX": true
});
});
请让我知道，如果还有什么你想让我包括。
你可以添加一个旋转器gif(在这里找到一个:http://www.ajaxload.info/)作为一个div，你的表应该是，然后清除它时，使用initComplete表加载
在<div class="col-md-12">:
<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();
}
})
});
如果数据是用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，最初设置为显示:none，然后显示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>我使用了下面链接提供的代码，但是不要使用旧的jquery版本，你应该使用最新的版本(3.x)，否则datatable会崩溃。希望能有所帮助
http://bradsknutson.com/blog/display-loading-image-while-page-loads/