18

我正在使用最新版本的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');

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

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

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

4

6 回答 6

24

你最好使用fnInitComplete：

$(document).ready(function () {
    $('#example').dataTable({
        "fnInitComplete": function (oSettings, json) {
            alert('DataTables has finished its initialisation.');
        }
    });
})
于 2013-07-04T17:06:47.190 回答
16

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

于 2012-06-13T15:34:08.633 回答
8

在新版本的 jQuery DataTable 上，该方法被调用：initComplete()

于 2015-11-25T13:50:03.533 回答
4

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

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

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

于 2018-12-11T12:49:27.610 回答
2

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

JavaScript 是否保证是单线程的？

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

此页面显示如何在成功时调用回调：

 // 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
       } );
     }
   } );
 } );
于 2012-06-13T15:35:31.633 回答
0

您还可以使用 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" }

        ]
    } );
于 2014-08-05T15:47:11.517 回答