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

我正在使用最新版本的jQuery datatables。是否有一个回调函数可以在数据加载并显示在数据表中之后立即使用？如何确定何时创建jQuery数据表以及如何加载数据

我有一个数据表，我正在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');

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

如果我使用第一种方案，是否有方法可以确定数据表何时已创建并加载数据？

有了这个检查，我希望它是一般的，以便它可以用来决定加载数据的方式。

来源

2012-06-13 Brendan Vogt

你试过'.ajaxSucess'？ – undefined

现在还没有，但是有没有更通用的方法可以使用，无论它是从Ajax调用获取数据还是仅仅是一个普通的JavaScript数组？ –

是的，你是对的，它从数组中检索数据，你可以尝试['promise（）']（http://api.jquery.com/promise/）和'done（）'方法。 – undefined

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

来源

2012-06-13 15:34:08

这对我有效。无论我使用来自JavaScript数组还是来自Ajax调用的数据，它都会调用此函数。谢谢。 –

但是如果只需要“onload”事件，则需要额外的变量。 –

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

Is JavaScript guaranteed to be single-threaded?

在您从服务器获取数据，然后拿着线与一个警告框的第一个场景。在第二种情况下，您预先填充数据。我相信这是不同的。

这个页面展示如何调用成功的回调：

http://datatables.net/usage/callbacks#fnServerData

// 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-13 15:35:31

您更好地使用fnInitComplete：

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

来源

2013-07-04 17:06:47 Xdg

谢谢，正是我需要捕获AJAX数据已被检索和GUI更新。 – 1DMF

新版本的DataTables 1.10已经发布，其API稍有变化。回调列表：http：//datatables.net/reference/option/ – Xdg

我使用1.10和上述工作正常。 – 1DMF

您还可以使用DATASRC作为remplacement为 “成功”因为它不应该超载：

这里以datatables为例。净

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-05 15:47:11

在DataTable中的jQuery的新版本，该方法被称为：initComplete

https://datatables.net/reference/option/initComplete

来源

2015-11-25 13:50:03 Drako

完美！我试图启动一个函数来填充附在包含特定数据表的选项卡上的徽章，并保持零计数，因为在检索所有数据（从服务器端ajax）之前，代码被触发。此调用延迟了该函数调用，直到所有数据都返回。 – ScottLenart

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

回答

相关问题