jQuery DataTables – 慢启动，开头显示“Normal”html表

我正在使用jQuery DataTable插件，但我担心脚本加载似乎需要一些时间，因此我的网页总是首先显示普通的html表，并且在完成所有脚本之后，该表将成为DataTable。 我不认为这种外观是可以接受的，所以我希望能在这里得到一些建议。 我是否可以使脚本更快，或者不显示前面的普通表？ 顺便说一下，我在_Layout.cshtml头标签的_Scripts局部视图中调用我的脚本

@Html.Partial("_Scripts") 

（更新）我试图隐藏表，并在数据表初始化后显示它，但是，我得到一个没有表头的数据表。 知道为什么会这样吗？

 $('#stocktable').hide(); // Initialize data table var myTable = $('#stocktable').dataTable({ // Try styling "sScrollX": "100%", "sScrollXInner": "100%", "bScrollCollapse": true, // To use themeroller theme "bJQueryUI": true, // To use TableTool plugin "sDom": 'Tlfrtip', // Allow single row to be selected "oTableTools": { "sRowSelect": "single" }, "fnInitComplete": function () { $('#stocktable').show(); } 

Answer 1

[编辑添加：这个较旧的答案是指之前的DataTables API。 不推荐使用jQueryUI选项，可在此处找到替换建议： https ：//datatables.net/manual/styling/jqueryui此外，fnInitCallback（与所有其他选项一样）删除了匈牙利表示法，现在是initCallback]

原始答案如下：

---

我的警告是，我不熟悉_Scripts部分视图，所以下面的建议是我会给某人包括并以“正常”方式调用JavaScript：

1. 设置纯HTML表的样式，使其与最终表共享相同的外观。 如果您启用了jQuery UI（ bJQueryUI: true ），这意味着在“普通”表中使用jQuery UI类而不是等待DT添加它们。

2. 使用各种FOUC（无格式内容的闪存）技术隐藏表，直到它准备好呈现。 DataTables API具有有用的回调，您可以将其用于“立即显示”部分内容，例如fnInitCallback。 最基本的（但可访问性有害）技术是使用display：none来设置表的样式，并在回调中使用$('#myTable').show()或一些变体。 在互联网上搜索应提供一些保持可访问性的出色解决方案。

除此之外，它实际上只是（如你所说！）对“可接受”的容忍度的问题。 我们使用服务器端处理（返回更少的记录），脚本加载器以加快脚本加载时间（我们正在试验head.js，但还有其他人！），以及脚本的最小化版本。 即便如此，我们有时会在普通表成为DT之前看到普通表，但由于互联网用户习惯于在元素加载时看到页面被“建立”，这是一个可接受的权衡。 对你来说，可能不是。

祝好运！

Answer 2

我做了一个非常简单的解决方案，工作正常。 在DataTable初始化中我使用了方法show（）：

 $(document).ready(function() { $('#example').dataTable({ "order": [[ 0, 'asc' ]] }); $('#example').show(); } ); 

…在HTML表格中我将样式显示为：none：

祝好运！

Answer 3

我有同样的问题。 试试这个：

 var dTable=$("#detailtable").dataTable({ "bProcessing":true, "bPaginate":false, "sScrollY":"400px", "bRetrieve":true, "bFilter":true, "bJQueryUI":true, "bAutoWidth":false, "bInfo":true, "fnPreDrawCallback":function(){ $("#details").hide(); $("#loading").show(); //alert("Pre Draw"); }, "fnDrawCallback":function(){ $("#details").show(); $("#loading").hide(); //alert("Draw"); }, "fnInitComplete":function(){ //alert("Complete"); } 

Answer 4

基于@hanzolo建议 – 这是我的评论作为答案（以及我的dataTable看起来像）：

 var stockableTable = $('#stockable').dataTable({ "bLengthChange": false, "iDisplayLength": -1, "bSort": false, "bFilter": false, "bServerSide": false, "bProcessing": false, "sScrollY": "500px", "sScrollX": "95%", "bScrollCollapse": true, // The following reduces the page load time by reducing the reflows the browser is invoking "fnPreDrawCallback":function(){ $("#loading").show(); }, "fnDrawCallback":function(){ }, "fnInitComplete":function(){ $("#details").show(); this.fnAdjustColumnSizing(); $("#loading").hide(); } }); 

Answer 5

我认为你应该只是在_Layout.cshtml中加载脚本，毕竟这就是它的用途。 部分视图实际上适用于可以在其他区域或至少呈现的HTML内容中重复使用的段。

话虽这么说，一件容易的事情就是隐藏桌子，直到它完成加载，甚至隐藏它并显示进度指示器。

你可以这样做：

 // .loadTable() is some function that loads your table and returns a bool indicating it's finished // just remember to check this bool within the function itself as it will be called over and over until it returns true while (!loadTable()) { // maybe show a progress bar if ($('#myTable').css('display') != 'none')) { $('#myTable').hide(); // if it isn't already hidden, hide it } } // hide progress bar $('#myTable').show(); 

UDPATE：

如果jQuery表插件有“成功”或“完成”回调，只需在页面加载时隐藏表格并在加载完成后显示它。

 $(document).ready(function () { $('#myTable').hide(); // run plugin and .show() on success or finished }); 

Answer 6

我的工作解决方案是一个“脏”技巧，隐藏表而不使用“display：none”。 普通的“display：none”样式会导致jQuery Data Tables的初始化问题。

首先，将数据表放在包装器div中：

 
 ...data table html as described in jQuery Data Table documentation...  

在CSS中：

 .dataTableParentHidden {overflow:hidden;height:0px;width:100%;} 

此解决方案隐藏数据表而不使用“display：none”。

在数据表初始化之后，您必须从包装器中删除类以显示该表：

 $('#yourDataTable').DataTable(...); $('#dataTableWrapper').removeClass('dataTableParentHidden'); 

Answer 7

我知道这是一个非常古老的问题，但也许我可以在将来帮助某个人，怎么知道……所以经过几个小时我找到了唯一适用于我的解决方案（表格将在完成后加载）：

       
Loading...
 
 
Something Here
 
 
   

Answer 8

这是由于ColVis插件。 从sDOM中删除“W”，您的表格渲染将会飞行（下载时为albiet）

Answer 9

• 以下是node.js把手示例。 但是，您可以使用您正在使用的任何Web前端框架来呈现数据。
• 如果您正在使用引导程序，则可以使用隐藏类隐藏表，或者手动隐藏元素。
• 然后在initComplete回调中，您可以使用jQuery删除隐藏类，只有在完全加载后才显示该表。

     {{#each devices}}  {{/each}} 
 
 
 
Name
 
Last Name
 
Age
 
Street Address
 
State
 
Country
 
 
 
 
{{first_name}}
 
{{last_name}}
 
{{age}}
 
{{street_address}}
 
{{state}}
 
{{country}}
 
 
  

Answer 10

由于顶部有filter，我的数据表在post之间跳跃。

简单的解决方案：使用display：none隐藏表，然后在调用DataTable（）之前使用jquery .fadeIn（）。