Come determinare quando jQuery datatable viene creato e caricato con i dati

Question

Sto utilizzando l'ultima versione di jQuery datatables. Esiste una funzione di callback che posso utilizzare solo dopo che i dati sono stati caricati e visualizzati nel datatable?

Possiedo un datatable che sto sperimentando in IE8. Ho 2 serie di dati che sto testando (di cui ne uso uno alla volta). Ho un array JavaScript e un insieme di dati che ottengo da una chiamata Ajax. Sto usando ASP.NET MVC 3.

configurazione che ottiene i suoi dati da una chiamata 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'); 

Quando il mio datatable viene caricato in questo modo si crea DataTable (senza dati) e la scatola di elaborazione visualizza e il display pop-up di avviso. A questo punto il datatable è lì ma non sono stati caricati dati nel datatable. Solo quando il popup scompare (quando faccio clic sul pulsante Ok nel popup), i dati vengono caricati nel datatable. Perchè è questo?

configurazione che ottiene i suoi dati da un 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'); 

DataTable viene creato e dati vengono caricati e poi fa solo il display pop-up. Questo è diverso dal primo scenario. Perché è così?

Se vado con il primo scenario, c'è un modo per determinare quando il datatable è stato creato e caricato con i dati?

Con questo controllo vorrei che fosse generale in modo che possa essere utilizzato in qualsiasi modo decido di caricarlo con i dati.

Answer 1

È possibile utilizzare la funzione fnDrawCallback. Viene chiamato ogni volta che viene disegnata la tabella. Ciò includerebbe quando la tabella viene caricata con dati, ordinata o filtrata.

Answer 2

Ho sempre saputo che javascript è a thread singolo. Ecco un post per sostenere che:

Is JavaScript guaranteed to be single-threaded?

Nel primo scenario si stanno ottenendo i dati dal server, e poi tenendo il filo con una finestra di avviso. Nel secondo scenario si pre-popolano i dati. Credo che sia la differenza.

Questa pagina mostra come chiamare una richiamata in caso di successo:

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 
     }); 
    } 
    }); 
}); 

Answer 3

È meglio utilizzare fnInitComplete:

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

Answer 4

È anche possibile utilizzare DATASRC come remplacement per "il successo" dal momento che non dovrebbe essere sovraccaricato:

Qui con l'esempio tipico dei 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" } 

     ] 
    }); 

Answer 5

Sulla nuova versione di DataTable JQuery, il metodo viene chiamato: InitComplete

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