在DataTables表加载Ruby on Rails时显示微调 [英] Display spinner while DataTables table loads Ruby on Rails

问题描述

使用Rails我已经建立了一个网络应用程序。 Web应用程序的其中一个页面显示一个使用 DataTables API 的表格。此 JSFiddle 显示了我的网络应用程序的示例。

$ b $这个问题是，当我开始添加大量数据（当前测试数据是1500行）时，表在运行javascript之前先加载每一行，这意味着您在几秒钟之前收到一个未成形的表Javascript启动并且DataTables激活。

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

编辑：我的主要问题是我不知道如何使用Javascript在加载表格时显示微调框，然后在页面加载完毕后更改为表格

我的代码如下：

HTML / eRB

 < div class =list> 
< div class =container> 
< div class =row> 
< div class =col-md-12> 
< table id =app-list-tableclass =display tablecellspacing =0> 
< thead> 
< tr class =table-headers> 
< th>标头1< / th> 
< th>标头2< / th> 
< th>标题3< / th> 
< th>标题4< / th> 
< th>标题5< 
< th>标题6< 
< th>标题7< 
< th>标题8< 
< th>标题9< 
< th>标题10< 
< / 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（点击此处，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/ ）作为 div 您的表应该在哪里，然后清除它该表使用 initComplete 加载。

如下所示：

 < img id =loadSpinnersrc =/ myspinner.gif> //将此权限放在`< div class =col-md-12> `
  

然后打电话给你的表：

（$ {

$ b var table = $（'＃app-list-table'）DataTable（{
/ / $其他数据表设置
initComplete：function（settings，json）{
$（'＃loadSpinner）。hide（）;
//或$（'＃loadSpinner ）.empty（）;
}
}）;

Using Rails I have built a web app. One of the pages of the web app displays a table which uses the DataTables API. This JSFiddle shows an example of what my web app looks like.

The problem with this is that when I begin to add in large amounts of data (current test data is 1500 rows), the table loads each row first before running the javascript meaning you get an unformated table for a few seconds before the Javascript kicks in and DataTables activates.

I would like to display a spinner, or processing message (something along those lines) in place of the table until the page has fully populated, once that has finished I would like to run my javascript activating DataTables.

EDIT: My main issue is I'm not sure how to use Javascript to display the spinner while the table loads but then change to the table once the page has finished loading

My code is as follows:

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

        });
    });

Please let me know if there is anything else you would like me to include.

解决方案

You can add in a spinner gif (find one here: http://www.ajaxload.info/) as a div where your table should be and then clear it when the table loads using initComplete.

Something like:

<img id="loadingSpinner" src="/myspinner.gif">//put this right below `<div class="col-md-12">`

And then call your table like this:

 $(document).ready(function() {
    var table = $('#app-list-table').DataTable({
//any other datatables settings here
"initComplete": function(settings, json) {
$('#loadingSpinner").hide();
//or $('#loadingSpinner").empty();
}
 });

这篇关于在DataTables表加载Ruby on Rails时显示微调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！