如何确定何时创建 jQuery 数据表并加载数据

Question

我正在使用最新版本的jQuery datatables。在数据加载并显示在数据表中之后，我可以使用回调函数吗？

我有一个正在IE8 中试验的数据表。我有两组正在测试的数据（我一次只使用一组）。我有一个 JavaScript 数组和一组从 Ajax 调用中获得的数据。我正在使用ASP.NET MVC 3。

从 Ajax 调用中获取数据的配置：

$('#banks-datatable').dataTable({
     "bProcessing": true,
     "sAjaxSource": '/Administration/Bank/List',
     "aoColumns": [
          { "sTitle": "Engine" },
          { "sTitle": "Browser" },
          { "sTitle": "Platform" },
          { "sTitle": "Version" },
          { "sTitle": "Grade" }
     ],
     "bAutoWidth": false,
     "bFilter": false,
     "bLengthChange": false,
     "iDisplayLength": 10
});

alert('test');

以这种方式加载我的数据表时，将创建数据表（没有数据）并显示处理框并显示警报弹出窗口。此时数据表已存在，但尚未将数据加载到数据表中。只有当弹出窗口消失时（当我单击弹出窗口上的 Ok 按钮时），数据才会加载到数据表中。这是为什么呢？

从 JavaScript 数组获取数据的配置：

var aDataSet = [
     ['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'],
     ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
     ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
     ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
     ['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A']
];

$('#banks-datatable').dataTable({
     "aoColumns": [
          { "sTitle": "Engine" },
          { "sTitle": "Browser" },
          { "sTitle": "Platform" },
          { "sTitle": "Version" },
          { "sTitle": "Grade" }
     ],
     "bAutoWidth": false,
     "bFilter": false,
     "bLengthChange": false,
     "iDisplayLength": 10,
     "aaData": aDataSet
});

alert('test');

创建数据表并加载数据，然后只显示弹出窗口。这与第一种情况不同。为什么会这样？

如果我采用第一种情况，有没有办法可以确定数据表何时创建并加载数据？

通过此检查，我希望它是通用的，以便可以以我决定加载数据的任何方式使用它。

Answer 1

你最好使用fnInitComplete:

$(document).ready(function () {
    $('#example').dataTable({
        "fnInitComplete": function (oSettings, json) {
            alert('DataTables has finished its initialisation.');
        }
    });
})

Answer 2

您可以使用fnDrawCallback 函数。每次绘制表格时都会调用它。这包括表何时加载数据、排序或过滤。

Answer 3

在新版jQuery DataTable上，方法调用：initComplete()

Answer 4

Datatable 提供 InitComplete 选项。你可以使用它。 可能会有所帮助

$('#example').DataTable({
  "initComplete": function(){
    alert('Data loaded successfully');
  }
});

链接 -> https://datatables.net/reference/option/initComplete

Answer 5

我一直都知道 javascript 是单线程的。这是支持这一点的帖子：

Is JavaScript guaranteed to be single-threaded?

在第一个场景中，您从服务器获取数据，然后使用警报框阻止线程。在第二种情况下，您预先填充数据。我相信这就是区别。

This page 展示了如何在成功时调用回调：

 // POST data to server
 $(document).ready(function() {
   $('#example').dataTable( {
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "xhr.php",
     "fnServerData": function ( sSource, aoData, fnCallback ) {
       $.ajax( {
         "dataType": 'json',
         "type": "POST",
         "url": sSource,
         "data": aoData,
         "success": fnCallback
       } );
     }
   } );
 } );

Answer 6

您也可以使用 dataSrc 作为“成功”的替代品，因为它不应该被重载：

这里是 datatables.net 的典型示例

var table = $('#example').DataTable( {
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": function ( json ) {
                //Make your callback here.
                alert("Done!");
                return json.data;
                }       
            },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }

        ]
    } );