jQuery DataTables - 慢启动,"Normal"html表开头显示

Question

我正在使用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();
        }

Answer 1

我做了一个非常简单的解决方案,工作正常.在DataTable初始化中我使用了方法show():

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

...并在HTML表格中我将样式显示为:none:

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

祝好运!

Answer 2

我有同样的问题.试试这个:

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 3

[编辑添加:此较旧的答案是指之前的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 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();
      }
  });