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

问题描述

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

这样做的问题是，当我开始添加大量数据(当前测试数据为 1500 行)时，表格会在运行 javascript 之前首先加载每一行，这意味着您会在几秒钟之前获得一个未格式化的表格Javascript 启动并激活 DataTables.

在页面完全填充之前，我想显示一个微调器或处理消息(沿着这些线的东西)代替表格，一旦完成，我想运行我的 javascript 激活 DataTables.

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

我的代码如下:

HTML/eRB

<div class="容器"><div class="row"><div class="col-md-12"><table id="app-list-table" class="display table" cellspacing="0"><头><tr class="table-headers"><th>标题1</th><th>头2</th><th>标题3</th><th>标题4</th><th>头5</th><th>标题6</th><th>标题7</th><th>标题8</th><th>标题9</th><th>头10</th></tr></thead><%= Server.find_each 做 |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><%结束%></tbody>

Javascript

$(document).ready(function() {var table = $('#app-list-table').DataTable({scrollX":真});});

如果您希望我包含其他任何内容，请告诉我.

解决方案

您可以添加微调 gif(在此处找到:http://www.ajaxload.info/) 作为 div 您的表格所在的位置，然后在表格加载时使用 initComplete 清除它.

在<div class="col-md-12">下面放类似的东西:

然后像这样调用你的表:

$(document).ready(function() {var table = $('#app-list-table').DataTable({//这里的任何其他数据表设置initComplete":函数(设置，json){$('#loadingSpinner').hide();//或 $('#loadingSpinner').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.

Put something like this right below <div class="col-md-12">:

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

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屋！