web-dev-qa-db-fra.com

jquery datatables rappel ajax

J'utilise jQuery DataTables et je fais des données côté serveur. J'essaie d'appeler une fonction lorsque l'appel ajax revient. J'ai essayé d'insérer ce fnCallback2 qui appelle ma fonction et la fonction d'origine, mais jQuery lance simplement une erreur (et ne me dit pas quelle est l'erreur) et ignore.

$("#brands").dataTable( {
"bServerSide" : true,
"sAjaxSource" : "ajax.php",
"fnServerData" : function(sSource, aoData, fnCallback) {
    fnCallback2 = function(a,b,c){
        fnCallback.call(a,b,c);
        update_editable();
    };
    $.ajax( {
        "dataType" : 'json',
        "type" : "POST",
        "url" : sSource,
        "data" : aoData,
        "success" : fnCallback2
    });}});

J'ai également essayé d'ajouter le paramètre fnInitComplete, mais cela n'est appelé que la première fois, pas après les pages suivantes.

"fnInitComplete": function(){
update_editable();
},

Comment appeler correctement mon code après la demande ajax afin que le rappel d'origine soit également appelé?

javascriptjqueryjavascript-eventsjquery-datatables
19
Bob Baddeley

Une autre option consiste à utiliser le fichier fnDrawCallback appelé après chaque événement de dessin. Ce qui sera fait après chaque requête ajax.

"fnDrawCallback" : function() {
    update_editable();
}
24
dotjoe

Essayez de cette façon:

"fnServerData": function ( sSource, aoData, fnCallback ) {
       /* Add some extra data to the sender */
       aoData.Push( { "name": "more_data", "value": "my_value" } );
       $.ajax( {
         "dataType" : 'json',
         "type" : "POST",
         "url" : sSource,
         "data" : aoData,
         "success" : function(json) {
           /* Do whatever additional processing you want on the callback, 
             then tell DataTables */
           fnCallback(json)
       } );
}

Vous pouvez ensuite faire ce que vous voulez avant la ligne fnCallback(json); - y compris en appelant une fonction.

8
ManseUK

SOLUTION

Avec DataTables 1.10, il existe plusieurs façons de gérer un événement d'achèvement Ajax.

  • Utilisation de ajax.dataSrc option:

    var table = $("#example").DataTable({
     serverSide: true,
     ajax: {
         url: "/test/0",
         dataSrc: function(d){

             // TODO: Insert your code

             return d.data;    
         }
     }
});

  • Utilisation de xhr event:

    $("#example").on('xhr.dt', function(e, settings, json, xhr){
    // TODO: Insert your code
});

var table = $("#example").DataTable({
     serverSide: true,
     ajax: {
         url: "/test/0"
     }
});

L'utilisation de xhr event par rapport à ajax.dataSrc option présente un avantage supplémentaire:

À partir de DataTables 1.10.7, cet événement est déclenché à la fois par des conditions de réussite et d'erreur lorsque la demande Ajax est terminée (c'est-à-dire qu'il est toujours déclenché quel que soit le résultat de la demande Ajax).

DEMO

Voir this jsFiddle pour le code et la démonstration.

6
Gyrocode.com

Essaye ça: 

"fnServerData": function ( sSource, aoData, fnCallback ) {
    $.getJSON( sSource, aoData, function (json) { 
       fnCallback(json)
}).complete(function(){update_editable(););
}
0
yoku2010