jQuery DataTables - 启动缓慢，开头显示“正常”html 表

jQuery DataTables - Slow initiation, "Normal" html table shown in the beginning

提问by shennyL

I'm using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and after all script done, the table will then become DataTable. I don't think this kind of appearance is acceptable, so I hope can get some advices here. whether I can make the scripts faster, or don't display the plain table ahead? Btw, I am calling my script from a _Scripts partial view at my _Layout.cshtml head tag

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

 @Html.Partial("_Scripts") 

(UPDATE) I tried to hide the table, and show it after the datatable initialize, however, I get a datatable without the table header. Any idea why this is happening?

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

$('#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();
        }

采纳答案by Greg Pettit

[edit to add: This older answer refers to the previous DataTables API. The jQueryUI options are deprecated and recommendations for replacement are found here: https://datatables.net/manual/styling/jqueryuiAlso, fnInitCallback (as with all other options) dropped Hungarian notation and is now initCallback]

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

Original answer follows:

原答案如下：

---

---

My caveat is that I am not familiar with _Scripts partial views, so the advice below is what I would give someone just including and calling JavaScript in the 'normal' ways:

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

1. Style the plain HTML table so that it shares the same appearance as the final. If you have jQuery UI enabled (bJQueryUI: true), this means having the jQuery UI classes in the 'plain' table rather than waiting for DT to add them.

2. Use various FOUC (flash of unstyled content) techniques to hide the table until it is ready to render. DataTables API has useful callbacks that you can use for the "show it now" part of things, such as fnInitCallback. The most basic (but accessibility-damaging) technique is to style the table with display:none, and in the callback, use $('#myTable').show()or some variation. Searching on the internet should provide some great solutions that preserve accessibility.

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

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

Other than that, it's really just a question of (as you say!) tolerance for "acceptable". We use server-side processing (returning far fewer records), a script loader for faster script loading time (we're experimenting with head.js but there are others!), and the minimized versions of the scripts. Even with this, we sometimes see the plain table for a moment before it becomes a DT, but since internet users are accustomed to seeing pages being 'built' before their eyes as elements are loaded, it was an acceptable tradeoff. For you, it might not be.

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

Good luck!

祝你好运！

回答by Alexandre Crivellaro

I did a very simple solution that works fine. In the DataTable initialization I used the method show():

我做了一个非常简单的解决方案，效果很好。在 DataTable 初始化中，我使用了 show() 方法：

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

... and in the HTML table I put the style display:none:

...在 HTML 表中，我将样式显示为：无：

<table id="example" class="display" cellspacing="0" width="100%" style="display:none">

Good luck!

祝你好运！

回答by bmoran

I had the same problem. Try this:

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

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");
        }

回答by tamersalama

Based on @hanzolo suggestion - here's my comment as an answer (and what my dataTable looks like):

基于@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();
      }
  });

回答by Sasvári Tamás

My working solution is a "dirty" trick to hide the table without using "display:none". The ordinary "display:none" style causes initialization problem for jQuery Data Tables.

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

First of all, place your data table in a wrapper div:

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

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

In CSS:

在 CSS 中：

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

This solution hides the data table without using "display:none".

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

After the data table initialization you have to remove class from wrapper to reveal the table:

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

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

回答by Terry

I think you should probably just load scripts in the _Layout.cshtml, after all that's what it's for. Partial views are really meant for segments that can be re-used in other areas or at the very least, rendered HTML content.

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

That being said, one easy thing to do would be to either hide the table until it's done loading or even hide it and show a progress indicator.

话虽如此，一件简单的事情就是隐藏表格直到它完成加载，或者甚至隐藏它并显示进度指示器。

You could do something like:

你可以这样做：

// .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:

UDPATE：

If the jQuery table plugin has a "success" or "finished" callback, just hide the table on page load and show it when it's done loading.

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

$(document).ready(function () {
    $('#myTable').hide();

    // run plugin and .show() on success or finished 
});

回答by Leonard Lepadatu

I know it's very old question, but maybe I can help someone in future, how know ... So after many hours I find the only solution that work's for me (table it will be loaded after it is rendered complete):

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

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

回答by Ryan

• The following is a node.js handlebars example. However, you can render the data using whatever web front-end framework you are using.
• If you're using bootstrap you can hide the table initially using the hidden class or alternatively hide the elements manually.
• Then in the initComplete callback you can then use jQuery to remove the hidden class to display the table only once it has loaded completely.

• 下面是一个 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>

For example:

例如：

回答by Ross

This is due to the ColVis plugin. remove the "W" from the sDOM and your table rendering will fly (albiet withou dropdowns)

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

回答by Peter

My datatable was jumping between posts because of the filter on top.

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

Simple solution: Hide the table with display:none, then use jquery .fadeIn() before DataTable() is called.

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