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

Question

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

问题在于，当我开始添加大量数据(当前测试数据为 1500 行)时，表格会在运行 javascript 之前首先加载每一行，这意味着在Javascript 启动，DataTables 激活。

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

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

我的代码如下:

HTML/eB

<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();
    }
  })
});