jQuery DataTables - 启动缓慢，开头显示“普通”html 表答案

【问题标题】：jQuery DataTables - Slow initiation, "Normal" html table shown in the beginningjQuery DataTables - 启动缓慢，开头显示“普通”html 表
【发布时间】：2011-11-29 15:43:06
【问题描述】：

我正在使用 jQuery DataTable 插件，但我担心脚本加载似乎需要一些时间，所以我的网页总是首先显示普通的 html 表格，在所有脚本完成后，表格将变为数据表。我不认为这种外观可以接受，所以我希望在这里得到一些建议。我是否可以使脚本更快，或者不显示前面的普通表格？顺便说一句，我从 _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": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }

【问题讨论】：

标签： jquery performance datatables

【解决方案3】：

[编辑添加：这个较旧的答案是指以前的 DataTables API。 jQueryUI 选项已弃用，替换建议可在此处找到：https://datatables.net/manual/styling/jqueryui 此外，fnInitCallback（与所有其他选项一样）放弃了匈牙利符号，现在是 initCallback]

原答案如下：

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

设置纯 HTML 表格的样式，使其与最终表格具有相同的外观。如果您启用了 jQuery UI (bJQueryUI: true)，这意味着将 jQuery UI 类放在“普通”表中，而不是等待 DT 添加它们。
使用各种 FOUC（无样式内容闪存）技术隐藏表格，直到准备好呈现。 DataTables API 具有有用的回调，您可以将其用于“立即显示”部分，例如 fnInitCallback。最基本（但会破坏可访问性）技术是使用 display:none 设置表格样式，并在回调中使用 $('#myTable').show() 或一些变体。在互联网上搜索应该会提供一些很好的解决方案来保持可访问性。

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

祝你好运！

【讨论】：

嗨，我用隐藏和显示编辑了我的代码，但是我得到了一个没有标题的表格！任何想法？？真的非常感谢...
确保您隐藏并显示某种包装 div。根据配置，DataTables 中一些看起来像“标题”的东西实际上并不是表的一部分。如果您在表格本身上调用隐藏和显示，您将丢失元素。 :-D
谢谢！我试图隐藏包装 $('#stocktable_wrapper').hide();但我的表格没有隐藏，在 DT 之前仍然显示纯 html 表格...
我必须查看您的页面才能确切知道发生了什么。当然，我的意思是笼统地隐藏某种“包装器”元素（使用通用术语），其中包含您的纯 HTML 表格。如果普通表没有被隐藏，那么当您尝试隐藏它时没有加载 jQuery，或者它不在该包装器内。
嗨，我通过设置不显示表格的样式得到它，然后在 fnDrawCallback 中显示它，非常感谢您的帮助...

【解决方案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();
      }
  });

【讨论】：

【解决方案5】：

我的工作解决方案是隐藏表格而不使用“显示：无”的“肮脏”技巧。普通的“display:none”样式会导致 jQuery 数据表的初始化问题。

首先，将你的数据表放在一个包装器 div 中：

<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>

在 CSS 中：

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

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

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

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

【讨论】：

这对我有用，其他答案与标题和：this.fnAdjustColumnSizing();不工作。谢谢大佬

【解决方案6】：

我认为您可能应该只在 _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 
});

【讨论】：

嗨，我用隐藏和显示编辑了我的代码，但是我得到了一个没有标题的表格！任何想法？？真的非常感谢...
如果您使用隐藏/显示代码更新您的问题，我可能会提供帮助。
需要查看 HTML 和 $('#stocktable').dataTable({}); 方法的其余部分

【解决方案7】：

我知道这是一个很老的问题，但也许我将来可以帮助某人，怎么知道...... 因此，经过数小时后，我找到了唯一适合我的解决方案（表格将在渲染完成后加载）：

      <html>
                <head>
                    <style>
                    .dn {
                         display: none;
                    }
                </style>
                </head>
                <body>
                        <div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
                        <table id="myTable" class="dn firstTableClass secondTableClass">
                             <tr><td>Something Here</td></tr>
                        </table>
                </body>


            <script>
         $(document).ready(function(){
    showMeTheTabel();
    });        
    function shoMeTheTable() {
            var dTable = $('#myTable').dataTable({
                "aoColumnDefs": [
                   {bla, bla}
                ],
                "oLanguage": {
                    "bla" : "bla"
                },
                "fnPreDrawCallback":function(){
                },
                "fnDrawCallback":function(){
                    $("#loading").addClass('dn'); 
                    $('#tabel').removeClass('dn');
                },
                "fnInitComplete":function(){
                    console.log("Complete")           // optional and Done !!!
                }
            });
    }
    </script>
     </html>

【讨论】：

【解决方案8】：

这是由于 ColVis 插件。从 sDOM 中删除“W”，你的表格渲染就会飞起来（尽管没有下拉菜单）

【讨论】：

嗨，你能举个例子吗？谢谢

【解决方案9】：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<table id="stocktable" class="table hidden">
<thead>
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Street Address</th>
    <th>State</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  {{#each devices}}
    <tr id="{{id}}">
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{age}}</td>
      <td>{{street_address}}</td>
      <td>{{state}}</td>
      <td>{{country}}</td>
    </tr>
  {{/each}}
</tbody>
</table>

<script>
  $(document).ready(function() {
    $('#stocktable').DataTable({
      columns: [{
          person: 'first_name'
        }, {
          person: 'last_name'
        },
        {
          person: 'age'
        },
        {
          person: 'street_address'
        },
        {
          person: 'state'
        },
        {
          person: 'country'
        }
      ],
      initComplete: function() {
       // Unhide the table when it is fully populated.
       $("#stocktable").removeClass("hidden");
      }
    });
  });
</script>

例如：

【讨论】：

【解决方案10】：

由于顶部的过滤器，我的数据表在帖子之间跳转。

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

【讨论】：