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

我使用 Rails 构建了一个网络应用程序。 Web 应用程序的其中一个页面显示了一个表格，该表格使用数据表API. This JSFiddle显示了我的网络应用程序的示例。

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

我想显示一个旋转器，或处理消息（沿着这些线的东西）代替表格，直到页面完全填充，一旦完成，我想运行我的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

        });
    });

如果您希望我添加任何其他内容，请告诉我。

您可以添加旋转 gif（在此处找到一个：http://www.ajaxload.info/) as a 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();
    }
  })
});