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

时间:2012-08-25 15:35:16

标签: jquery datatables

有人可以帮我解决这个问题吗?我正面临着一个问题,即一开始就出现了简单的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 );
        });

2 个答案:

答案 0 :(得分:1)

首先,默认情况下将表格设置为hidden

<table id="#datatables" hidden>

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

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

答案 1 :(得分: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"
    ]
}