Подтвердить что ты не робот

Как определить, когда jQuery datatable создается и загружается данными

Я использую последнюю версию 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 был создан и загружен данными?

С этой проверкой я бы хотел, чтобы она была общей, чтобы ее можно было использовать, когда-либо, я решил загрузить ее с данными.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать функцию fnDrawCallback. Он вызывается каждый раз, когда таблица рисуется. Это будет включать, когда таблица загружается данными, сортируется или фильтруется.

Ответ 2

Лучше использовать fnInitComplete:

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

Ответ 3

В новой версии jQuery DataTable метод называется: initComplete()

Ответ 4

Я всегда знал, что 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
       } );
     }
   } );
 } );

Ответ 5

Вы также можете использовать 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" }

        ]
    } );

Ответ 6

Datatable предоставляет опцию InitComplete. Вы можете использовать это. Может быть, это поможет

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

Ссылка → https://datatables.net/reference/option/initComplete