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

Posted 2023-05-09

【中文标题】在 DataTables 表加载 Ruby on Rails 时显示微调器

【英文标题】：Display spinner while DataTables table loads Ruby on Rails

【发布时间】：2015-11-05 08:35:45

【问题描述】：

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

这样做的问题是，当我开始添加大量数据（当前测试数据为 1500 行）时，该表会在运行 javascript 之前先加载每一行，这意味着在Javascript 启动并激活 DataTables。

我想在表格完全填充之前显示一个微调器或处理消息（类似这些行的东西），一旦完成，我想运行我的 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

        );
    );

如果您还希望我提供任何其他内容，请告诉我。

【问题讨论】：

Spin.js 是微调器本身的一个选项。其他一切都取决于您希望它看起来像什么......

微调器和它的设计并不重要。我的问题是我不知道在哪里添加 js 代码以在页面加载时显示微调器，然后在完全加载后显示表格......抱歉，我的问题不够清楚跨度>

不幸的是，我自己有点业余。但我不认为这是 DataTables 问题......当我的页面加载时，它会在激活 DataTables 之前填充整个 HTML 部分，这会留下未格式化的表格。我认为 DataTables 正在等待 IT。不是相反

ETA：数据是如何加载的？是异步的吗？要在加载时显示微调器，您希望在数据之前加载微调器，然后在成功加载后将其移除

数据加载如问题所示。它使用嵌入式 ruby​​ 循环遍历每个对象并使用该对象作为参考填充列。我不确定java脚本和ruby是否异步运行。

【参考方案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();
    
  )
);

【讨论】：

表格加载后隐藏微调器非常有效！谢谢你。另一件事是从页面加载到 DataTables 初始化之前隐藏表格。页面首次加载时是否有 javascript 函数 ti 初始化代码？

不幸的是，据我所知，您不能这样做。如果数据表找不到表的 div，您将收到错误并且不会加载。这包括 div 是否隐藏或事后添加。

我明白了。。谢谢你的帮助。

谢谢。我将尝试以其他方式隐藏 div，但您的微调器实现有所帮助

【参考方案2】：

如果数据是在 Ruby 中加载的，那么加载微调器是没有意义的，因为那时数据已经加载了。这是 Rails 应用程序中发生的事情的基本顺序：

控制器然后查看 Ruby 执行，呈现 HTML HTML 被发送到客户端 客户端请求按顺序链接 CSS 和 JS CSS 和 JS 依次执行 异步 JS 结束

因此，您的大部分延迟发生在第 1 步，但 CSS/JS 微调器要到第 4 步才会加载。如果您想使用微调器，则需要通过异步 Ajax 加载数据，因此您可以在 4 中加载 spinner，然后在 5 中完成加载数据并移除 spinner。使用 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。

【讨论】：

抱歉，我不想使用 AJAX。谢谢你的回答

【参考方案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>

【参考方案4】：

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

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