Question

使用Rails我已经构建了一个Web应用程序。 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应用程序中发生的事情的简单排序：

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。

Answer 3

如果您正在寻找隐藏数据表的方法，直到它准备就绪，可以通过将数据表放在最初设置为display：none的div中，然后在初始化之后显示div来实现datatable ...我还在整个页面上加入了一个不透明的叠加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/

DataTables表加载Ruby on Rails

HTML / ERB

的Javascript

4 个答案: