Ответ 1
Вы можете использовать функцию fnDrawCallback
. Он вызывается каждый раз, когда таблица рисуется. Это будет включать, когда таблица загружается данными, сортируется или фильтруется.
Я использую последнюю версию jQuery datatables
. Есть ли функция обратного вызова, которую я могу использовать сразу после того, как данные были загружены и отображены в datatable?
У меня есть datatable, с которым я экспериментирую в IE8
. У меня есть 2 набора данных, которые я тестирую (из которых я просто использую один за раз). У меня есть массив 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');
Когда мой datatable загружается таким образом, создается datatable (без данных), и отображается окно обработки и появляется всплывающее окно предупреждения. На данный момент данные существуют, но данные не загружаются в данные. Только тогда, когда всплывающее окно уходит (когда я нажимаю кнопку "ОК" во всплывающем окне), данные загружаются в datatable. Почему это?
Конфигурация, которая получает свои данные из массива 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');
Создается datatable и данные загружаются, а затем отображается только всплывающее окно. Это отличается от первого сценария. Почему это так?
Если я пойду с первым сценарием, есть ли способ, который я могу определить, когда datatable был создан и загружен данными?
С этой проверкой я бы хотел, чтобы она была общей, чтобы ее можно было использовать, когда-либо, я решил загрузить ее с данными.
Вы можете использовать функцию fnDrawCallback
. Он вызывается каждый раз, когда таблица рисуется. Это будет включать, когда таблица загружается данными, сортируется или фильтруется.
Лучше использовать fnInitComplete
:
$(document).ready(function () {
$('#example').dataTable({
"fnInitComplete": function (oSettings, json) {
alert('DataTables has finished its initialisation.');
}
});
})
В новой версии jQuery DataTable метод называется: initComplete()
Я всегда знал, что 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
} );
}
} );
} );
Вы также можете использовать 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" }
]
} );
Datatable предоставляет опцию InitComplete. Вы можете использовать это. Может быть, это поможет
$('#example').DataTable({
"initComplete": function(){
alert('Data loaded successfully');
}
});
Ссылка → https://datatables.net/reference/option/initComplete