jQuery Tables: Aufruf draw() innerhalb Initcomplete

Question

Also, für meine Datentabelle, ich brauche einige Ajax-Aufrufe zu tun, und die Tabelle mit den zurückgegebenen Informationen neu zu zeichnen, aber ich hatte einige Probleme ....

Ich versuchte, die Ajax-Aufrufe innerhalb des Datatable-Event „drawCallback“, und rufen Sie die Funktion ziehen(), wenn die Anrufe abgeschlossen, aber auf die Ausführung zu tun, wurde das Ereignis endlos, bis der Browser abgestürzt feuern. Ich denke, es liegt daran, dass das Ereignis „drawCallback“ nach dem Aufruf Unentschieden abgefeuert wird() (es für mich jetzt scheint offensichtlich, aber ich habe es nicht erkennen, wenn ich es Codierung).

Also, meine Frage ist, wenn ich versuche, die gleichen Ajax-Aufrufe (und hinteren draw() Anrufe) innerhalb der Veranstaltung „Initcomplete“ zu tun, anstatt mit „drawCallback“, wird die draw() function das Ereignis "initComplete" erneut auslösen? (und daraus ergibt sich wieder eine Endlosschleife)

EDIT: Ich habe vergessen zu erwähnen, dass ich ein Java-Servlet als Server verwende, wo die Ajax-Anrufe gerichtet sind. Hier ist die Datentabelle Code:

(ja, ich bin mit Scriptlets hier, ich bin ein Monster)

$("#dtExample").DataTable({ 
    data: <%= lGastosJson %>, 
    columns: [ 
     {data: 'idGasto'}, 
     {data: 'fecha'}, 
     {data: 'descripcion'}, 
     {data: 'projectDescription'}, 
     {data: 'descrTipoGasto'}, 
     {data: 'costoTotalEuro'}, 
     {data: 'nombreAdjunto', 
     defaultContent: ''} 
    ], 
    columnDefs: [ 
     // ... 
    ], 
    drawCallback: function(settings){ 
     var tableData = this.api().rows().data(); 
     var redraw = false; 
     var self = this; 

     for (var i=0;i<tableData.length;i++){ 
     //This column may be empty, I'm only doing the ajax call if it is NOT empty 
     if (typeof tableData[i]['nombreAdjunto'] !== 'undefined'){ 
      var output = ""; 

      $.ajax({ 
       url: '<%= contextPath %>/AsincronasServlet', 
       data: {command: "getAttachPhotos", username: "<%= user %>", adjunto: tableData[i]['nombreAdjunto'], index: i}, 
       success: function(result){ 
       console.log(result); 
       var resultParams = result.split("@"); 
       var error = false; 
       var index = -1; 
       for (var j=0; j<resultParams.length; j++){ 
        if (resultParams[j].substring(0,5) === "error"){ 
         error = true; 
        } 
        if (resultParams[j].substring(0,5) === "index"){ //el indice se necesita tanto en success como en error 
         var idxPar = resultParams[j].split(":"); 
         index = idxPar[1]; 
        } 
       } 

       //The idea is using this if-else to change the inner HTML of the column and then redraw 
       if (error){ 
        output = "<span class='fa fa-search fa-2x previewError' aria-hidden='true' title='Error al cargar la imagen'></span>"; 
        tableData[index]['nombreAdjunto'] = output; 
       } else { 
        //haven't coded this yet       
       } 

       self.api().rows().draw(); 
      } 
     }); 
    } 
}}}); 

Vielen Dank im Voraus!

Answer 1

Ich schlage vor, Sie tun die Manipulation im Voraus, nicht nach Tabelle Initialisierung. Sie können eine Funktion an Daten übergeben und in dieser Funktion die AJAX-Schleife ausführen. Sehr schematisch, nicht so, wie ich Ihren Code reproduzieren:

function dataCallback(tableData) { 
    for (var i=0;i<tableData.length;i++){ 
    ... 
    ... 
    if (i == tableData.length-1) { 
     return tableData 
    } 
    } 
} 

in der Datatable Initialisierung:

data: dataCallback(<%= lGastosJson %>), 

Proof-of-Concept, können die Daten auf diese Weise manipuliert werden ->http://jsfiddle.net/0f9Ljfjr/960/