在 DataTables table 在 Rails 上加载 Ruby 时显示微调器

Question

使用 Rails 我构建了一个网络应用程序。 Web 应用程序的其中一个页面显示 table，它使用 DataTables API. This JSFiddle 显示我的 Web 应用程序的示例。

问题在于，当我开始添加大量数据时（当前测试数据为 1500 行），table 在运行之前首先加载每一行 javascript 意味着在 Javascript 启动和 DataTables 激活之前几秒钟你会得到一个未格式化的 table。

我想显示一个微调器或处理消息（沿着这些行的东西）代替 table 直到页面完全填充，一旦完成我想运行我的 javascript 激活数据表。

编辑：我的主要问题是我不确定如何在 table 加载时使用 Javascript 显示微调器，然后更改为 table 页面加载完成后

我的代码如下：

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

您可以在您的 table 所在的位置添加一个旋转器 gif（在此处找到一个：http://www.ajaxload.info/）作为 div，然后在 table 时清除它使用 initComplete.

加载

把这样的东西放在 <div class="col-md-12"> 的正下方：

<img id="loadingSpinner" src="/myspinner.gif">

然后这样调用你的 table：

$(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 应用中发生的事情的简单排序：

控制器然后视图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 初始化数据表后...我还在整个页面上包含了一个不透明的覆盖层 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

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

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

在 DataTables table 在 Rails 上加载 Ruby 时显示微调器

Display spinner while DataTables table loads Ruby on Rails

javascript

ruby

jquery

ruby-on-rails

datatables

HTML/eRB

Javascript