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" ] }

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

2 个答案: