JQuery数据表在加载时显示纯HTML页面

Question

有人可以帮我这个代码吗？我正面临着一个问题，即一开始就出现了简单的html页面。我注意到，对于像100条记录这样的较小查询，它工作正常，但是像8000这样的大查询。它在开始加载时将整个表显示为普通的html表，然后正常工作。

        $(document).ready( function () {
            var oTable = $('#datatables').dataTable( {
                "bJQueryUI": true,
                "sScrollY": "300px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": true,
                "bPaginate": true,
                "aaSorting":[[0, "asc"]],
                "sPaginationType":"full_numbers",
            });
            new FixedColumns( oTable );
        });

Answer 1

首先，默认情况下将表设置为hidden：

<table id="#datatables" hidden>

然后在initComplete构造函数中包含$().DataTable()回调。这将在加载所有数据后运行，因此您可以将表设置为$().show()：

$('#datatables').dataTable( {
  "initComplete": function(settings, json) {
     $('#datatables').show();
     }
} );

Answer 2

删除HTML文件中的所有数据并将其留空。这样您的页面就会立即加载。在将数据加载到页面中时，Ajax源将显示一个很好的加载图形。

下面是插件使用Ajax源选项的配置。

$(document).ready(function() {
    $('#datatables').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'arrays.txt'
    } );
} );

下面是从arrays.txt提供的，其中您的数据作为静态文件提供，或者您可能有服务器逻辑来创建数据：arrays.txt

{
  "aaData": [
    [
      "Trident",
      "Internet Explorer 4.0",
      "Win 95+",
      "4",
      "X"
    ],
    [
      "Trident",
      "Internet Explorer 5.0",
      "Win 95+",
      "5",
      "C"
    ],
    [
      "Trident",
      "Internet Explorer 5.5",
      "Win 95+",
      "5.5",
      "A"
    ]
}