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

2021/01/06 03:31 · jquery ·  · 0评论

我正在使用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": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }

[编辑添加：此较早的答案引用以前的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设置表的样式，然后在回调中使用use$('#myTable').show()或某些变体。在互联网上搜索应该提供一些很好的解决方案，以保持可访问性。

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

祝好运！

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

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

...，然后在HTML表格中放置样式display：none：

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

祝好运！

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

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

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

我的工作解决方案是不使用“ 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>

在CSS中：

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

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

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

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

我想您可能应该只将脚本加载到_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>
                <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>

这是由于ColVis插件。从sDOM中删除“ W”，您的表格呈现将开始飞行（不带下拉菜单）

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

例如：

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

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

本文地址：http://jquery.askforanswer.com/jquery-datatables-qidonghuanmankaitouxianshiwei-normal-htmlbiao.html
文章标签： ,   ,  
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载

老薛主机终身7折优惠码boke112

上一篇：
下一篇：

评论已关闭！