web-dev-qa-db-fra.com

Comment déterminer quand jQuery datatable est créé et chargé avec des données

J'utilise la dernière version du jQuery datatables. Existe-t-il une fonction de rappel que je peux utiliser juste après que les données ont été chargées et affichées dans le datatable?

J'ai un datatable que je teste dans IE8. Je teste deux ensembles de données (dont je n'utilise qu'une à la fois). J'ai un tableau JavaScript et un ensemble de données que je reçois d'un appel Ajax. J'utilise ASP.NET MVC 3.

Configuration qui obtient ses données d'un appel 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');

Lorsque mon datatable est chargé de cette façon, le datatable est créé (sans données) et la boîte de traitement s'affiche et la fenêtre d'alerte s'affiche. À ce stade, le datatable est là mais aucune donnée n'a été chargée dans le datatable. Ce n'est que lorsque la fenêtre contextuelle disparaît (lorsque je clique sur le bouton Ok de la fenêtre contextuelle) que les données sont chargées dans le datatable. Pourquoi est-ce?

Configuration qui obtient ses données d'un tableau 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');

Le datatable est créé et les données sont chargées et alors seulement le popup s’affiche. Ceci est différent du premier scénario. pourquoi est-ce le cas?

Si je choisis le premier scénario, y a-t-il moyen de déterminer quand le datatable a été créé et chargé avec des données?

Avec cette vérification, je voudrais que ce soit général afin qu'il puisse être utilisé quelle que soit la façon dont je décide de le charger avec des données.

javascriptjqueryjquery-pluginsinternet-explorer-8
14
Brendan Vogt

Vous pouvez utiliser la fonction fnDrawCallback . Il est appelé à chaque fois que la table est dessinée. Cela inclut le moment où la table est chargée avec des données, triée ou filtrée.

12
Jason Towne

Vous feriez mieux d'utiliser fnInitComplete:

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

Sur la nouvelle version de jQuery DataTable, la méthode est appelée: initComplete()

7
Drako

J'ai toujours su que javascript était à thread unique. Voici un post pour soutenir cela:

JavaScript est-il garanti d'être mono-thread?

Dans le premier scénario, vous obtenez des données du serveur, puis vous présentez le fil avec une boîte d’alerte. Dans le deuxième scénario, vous pré-remplissez des données. Je crois que c'est la différence.

Cette page montre comment appeler un rappel en cas de succès:

 // 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
       } );
     }
   } );
 } );
2
JoeH-Java

Vous pouvez également utiliser dataSrc comme remplacement pour "success" car il ne devrait pas être surchargé:

Ici avec l'exemple typique de 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" }

        ]
    } );
0
Joseph Garrone

Datatable fournit l'option InitComplete. Vous pouvez l'utiliser .. .. Peut-être que cela vous aidera

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

Lien -> https://datatables.net/reference/option/initComplete

0
Junaid Nazir