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

Question

我使用 Rails 构建了一个网络应用程序。 Web 应用程序的一个页面显示一个使用DataTables API 的表格。这个JSFiddle 展示了我的网络应用程序的示例。

这样做的问题是，当我开始添加大量数据（当前测试数据为 1500 行）时，该表会在运行 javascript 之前先加载每一行，这意味着在Javascript 启动并激活 DataTables。

我想在表格完全填充之前显示一个微调器或处理消息（类似这些行的东西），一旦完成，我想运行我的 javascript 激活 DataTables。

编辑：我的主要问题是我不确定如何在表格加载时使用 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>

Javascript

$(document).ready(function() {
        var table = $('#app-list-table').DataTable({
            "scrollX": true

        });
    });

如果您还希望我提供任何其他内容，请告诉我。

Answer 1

您可以添加一个微调器 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();
    }
  })
});

Answer 2

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

1. 控制器然后查看 Ruby 执行，呈现 HTML
2. HTML 被发送到客户端
3. 客户端请求按顺序链接 CSS 和 JS
4. CSS 和 JS 依次执行
5. 异步 JS 结束

因此，您的大部分延迟发生在第 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();
});

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

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

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

Answer 3

如果您正在寻找一种在数据表准备好之前隐藏数据表的方法，可以通过将数据表放入最初设置为 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>

Answer 4

我使用了下面链接中提供的代码，但如果不使用旧的 jquery 版本，您应该使用最新的 (3.x)，否则 Datatables 会崩溃。希望对您有所帮助

http://bradsknutson.com/blog/display-loading-image-while-page-loads/