jQuery数据表-启动速度慢；“正常”；html表格如开头所示

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

 @Html.Partial("_Scripts") 

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

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

$（'#stocktable'）.hide（）；
//初始化数据表
var myTable=$（'#stocktable'）.dataTable({
//试试造型
“sScrollX”：“100%”，
“sScrollXInner”：“100%”，
“崩溃”：没错，
//使用themeroller主题
“bJQueryUI”：没错，
//使用TableTool插件
“sDom”：“Tlfrtip”，
//允许选择单行
“可旋转工具”：{
“sRowSelect”：“单一”
},
“fnInitComplete”：函数（）{
$（'#stocktable'）.show（）；
}

[编辑以添加：此旧答案引用了以前的DataTables API。jQueryUI选项已弃用，此处提供了替换建议：此外，FNITCallback（与所有其他选项一样）删除了匈牙利符号，现在是initCallback]

原答覆如下：

---

我的警告是，我不熟悉_脚本部分视图，因此下面的建议是我将给某人的建议，只是以“正常”的方式包括和调用JavaScript：

设置普通HTML表格的样式，使其与最终表格具有相同的外观。如果启用了jQuery UI（

bJQueryUI:true

），这意味着将jQuery UI类放在“普通”表格中，而不是等待DT添加它们

使用各种FOUC（未设置样式的内容的闪存）技术隐藏表，直到它准备好呈现。DataTables API有有用的回调，您可以用于“立即显示”部分，例如FNITCallback。最基本的回调（但会破坏可访问性）技术是使用display:none设置表的样式，并在回调中使用

$（“#myTable”）.show（）

或一些变体。在internet上搜索应该提供一些保留可访问性的优秀解决方案

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

---

祝你好运！

我认为你应该在_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();

乌德帕特：

如果jQuery表插件有一个“success”或“finished”回调，只需在页面加载时隐藏该表，并在加载完成时显示它

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

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

---

我也有同样的问题。请尝试以下方法：

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

---

我知道这是一个很老的问题，但也许我能在将来帮助别人，怎么知道。。。 因此，经过几个小时后，我找到了唯一适合我的解决方案（完成后将加载该表）：

.dn{
显示：无；
}
加载。。。
这里有东西
$（文档）.ready（函数（）{
showmetabel（）；
});        
函数shoMeTheTable（）{
var dTable=$（'#myTable'）.dataTable({
“aoColumnDefs”：[
{bla，bla}
],
“语言”：{
“bla”：“bla”
},
“fnPreDrawCallback”：函数（）{
},
“fnDrawCallback”：函数（）{
$（“#加载”）.addClass（'dn'）；
$（'#tabel'）.removeClass（'dn'）；
},
“fnInitComplete”：函数（）{
console.log（“Complete”）//可选，完成！！！
}
});
}

基于@hanzolo建议-以下是我的评论作为答案（以及我的数据表的外观）：

---

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

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

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

---

祝你好运！

这是因为ColVis插件。从sDOM中删除“W”，您的表渲染将飞行（albiet withou下拉列表）

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

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

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

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

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

此解决方案不使用“显示：无”隐藏数据表<

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

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

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

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

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