Javascript 如何确定何时创建 jQuery 数据表并加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11017533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to determine when jQuery datatable is created and loaded with data
提问by Brendan Vogt
I am using the latest version of the jQuery datatables. Is there a callback function that I can use just after the data has been loaded and displayed in the datatable?
我正在使用最新版本的jQuery datatables. 是否有可以在数据加载并显示在数据表中后使用的回调函数？
I have a datatable that I am experimenting with in IE8. I have 2 sets of data that I am testing with (of which I just use one at a time). I have a JavaScript array and a set of data that I get from an Ajax call. I am using ASP.NET MVC 3.
我有一个数据表，我正在IE8. 我有 2 组数据用于测试（我一次只使用一组）。我有一个 JavaScript 数组和一组从 Ajax 调用中获得的数据。我正在使用ASP.NET MVC 3.
Configuration that gets its data from an Ajax call:
从 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');
When my datatable is loaded this way the datatable is created (with no data) and the processing box displays and the alert popup displays. At this point the datatable is there but no data has been loaded into the datatable. Only when the popup goes away (when I click the Ok button on the popup) then the data is loaded into the datatable. Why is this?
当我的数据表以这种方式加载时，数据表被创建（没有数据）并显示处理框并显示警报弹出窗口。此时数据表已存在，但尚未将数据加载到数据表中。只有当弹出窗口消失时（当我单击弹出窗口上的 Ok 按钮时），数据才会加载到数据表中。为什么是这样？
Configuration that gets its data from a JavaScript array:
从 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');
The datatable is created and data is loaded and then only does the popup display. This is different to the first scenario. Why is this the case?
创建数据表并加载数据，然后仅进行弹出显示。这与第一种情况不同。为什么会这样？
If I go with the first scenario, is there a way that I can determine when the datatable has been created and loaded with data?
如果我采用第一种方案，是否可以确定何时创建数据表并加载数据？
With this check I would like it to be general so that it can be used what ever way I decide to load it with data.
有了这个检查，我希望它是通用的，这样我就可以以任何方式使用它来加载数据。
采纳答案by Jason Towne
You can use the fnDrawCallbackfunction. It gets called every time the table is drawn. This would include when the table is loaded with data, sorted or filtered.
您可以使用该fnDrawCallback功能。每次绘制表格时都会调用它。这将包括表加载数据、排序或过滤的时间。
回答by Xdg
You better use fnInitComplete:
你最好使用fnInitComplete：
$(document).ready(function () {
$('#example').dataTable({
"fnInitComplete": function (oSettings, json) {
alert('DataTables has finished its initialisation.');
}
});
})
回答by Drako
On the new version of jQuery DataTable, the method is called: initComplete()
在新版本的 jQuery DataTable 上，该方法被调用： initComplete()
回答by JoeH-Java
I've always known javascript to be single threaded. Here is a post to support that:
我一直都知道 javascript 是单线程的。这是一个支持这一点的帖子：
Is JavaScript guaranteed to be single-threaded?
In the first scenario you are getting data from the server, and then holding up the thread with an alert box. In the second scenario you pre-populate data. I believe that is the difference.
在第一个场景中，您从服务器获取数据，然后用警告框阻止线程。在第二种情况下，您预填充数据。我相信这就是区别。
This pageshows how to call a callback on success:
此页面显示如何在成功时调用回调：
// 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
} );
}
} );
} );
回答by Joseph Garrone
You can also use dataSrc as remplacement for "success" since it should not be overloaded :
您还可以使用 dataSrc 作为“成功”的替代品，因为它不应该被重载：
Here with the tipical exemple of datatables.net
这里以 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" }
]
} );
回答by Junaid Nazir
Datatable provides InitComplete option. You can use it. May be that will help
Datatable 提供了 InitComplete 选项。你可以使用它。可能会有所帮助
$('#example').DataTable({
"initComplete": function(){
alert('Data loaded successfully');
}
});
Link -> https://datatables.net/reference/option/initComplete
