2017-08-24 37 views
1

因此,对于我的数据表,我需要做一些ajax调用,并用返回的信息重新绘制表,但是我有一些......问题。jQuery DataTables:在initComplete里面调用draw()

我试图做的数据表事件“drawCallback”里面的Ajax调用,并调用该函数()当调用完成,但在执行时该事件被不断地射击,直到浏览器崩溃。我想这是因为事件“drawCallback”在调用draw()后被解雇(这对我来说似乎很明显,但是当我编写代码时我没有意识到)。

所以,我的问题是,如果我尝试做同样的Ajax调用(和后平局()呼叫)事件“initComplete”里面,而不是使用“drawCallback”,将平局()函数再次激发事件“initComplete”? (并导致无尽的循环再次)

编辑:我忘了提及我使用Java Servlet作为服务器,其中ajax调用是指示。下面是数据表代码:

(是的,我使用的小脚本在这里,我是一个怪物)

$("#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(); 
      } 
     }); 
    } 
}}}); 

提前感谢!

+0

“*但是,在执行时,事件无休止地发生,直到浏览器崩溃*“一个真正的堆栈溢出:)。你可以使用draw回调来更新调用绘制回调函数的表格,以更新表格等......除了那些没有特定代码的特殊应答 - 你想要做什么,完全是......? – davidkonrad

回答

0

我建议你先进行操作,而不是在表初始化之后。您可以将一个函数传递给数据,并在该函数中运行AJAX循环。非常概略的,没有办法,我可以复制你的代码:

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

DataTable中的初始化:

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

概念证明,数据可以被操纵,这种方式 - >http://jsfiddle.net/0f9Ljfjr/960/

+1

我喜欢这种方法,它减少了表格执行的绘制次数。可悲的是,这不适合我的情况。由于我使用AJAX更新信息,并且在大多数情况下,我需要进行多次调用,所以我无法在AJAX succes函数中返回数据。 无论如何,您的答案非常有用,因为在第一次绘制之前修改内容比在完全绘制内容并重新绘制之后修改内容要干净得多。谢谢! :D – Paul

+0

@Paul,这就是为什么我建议'if(i == tableData.length-1){',你不能从ajax成功返回,但是你可以从'for返回(var i = 0; i davidkonrad

+0

而不是增加一个小超时,将ajax调用设置为async = false不是更容易吗? – Paul