3

有人可以帮我处理这段代码吗？我正面临问题，即一开始就出现纯 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 );
        });
4

2 回答 2

2

首先，将您的表hidden默认设置为：

<table id="#datatables" hidden>

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

$('#datatables').dataTable( {
  "initComplete": function(settings, json) {
     $('#datatables').show();
     }
} );
于 2017-12-19T12:49:30.633 回答
0

删除 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"
    ]
}
于 2012-09-19T23:56:42.680 回答