jquery datatables ajax回调

Question

我正在使用jQuery DataTables并执行服务器端数据.我正试图在ajax调用返回时调用一个函数.我尝试插入这个调用我的函数和原始函数的fnCallback2,但jQuery只是抛出一个错误(并没有告诉我错误是什么)并跳过了.

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

我也尝试添加fnInitComplete参数,但这只是第一次被调用,而不是在后续页面之后.

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

如何在ajax请求之后正确调用我的代码,以便调用原始回调？

Answer 1

另一种选择是使用在每个绘制事件之后调用的fnDrawCallback.每次ajax请求后都会执行此操作.

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

Answer 2

试试这种方式:

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

然后,您可以在该fnCallback(json);行之前执行您想要执行的操作- 包括调用函数.

Answer 3

解

使用DataTables 1.10,有多种方法可以处理Ajax完成事件.

• 使用ajax.dataSrc选项:

  var table = $("#example").DataTable({
       serverSide: true,
       ajax: {
           url: "/test/0",
           dataSrc: function(d){
  
               // TODO: Insert your code
  
               return d.data;    
           }
       }
  });
  

• 使用xhr事件:

  $("#example").on('xhr.dt', function(e, settings, json, xhr){
      // TODO: Insert your code
  });
  
  var table = $("#example").DataTable({
       serverSide: true,
       ajax: {
           url: "/test/0"
       }
  });
  

使用xhr事件与ajax.dataSrc选项有一个额外的好处:

从DataTables 1.10.7开始,当Ajax请求完成时,该事件由成功和错误条件触发(即无论Ajax请求的结果如何,它总是被触发).

DEMO

有关代码和演示,请参阅此jsFiddle.