Javascript jquery数据表ajax回调

jquery datatables ajax callback

提问by Bob Baddeley

I am using jQuery DataTables and doing server-side data. I'm trying to call a function when the ajax call returns. I tried inserting this fnCallback2 which calls my function and the original function, but jQuery just thows an error (and doesn't tell me what the error is) and skips out.

我正在使用 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
    });}});

I also tried adding the fnInitComplete parameter, but that only gets called the first time, not after subsequent pages.

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

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

How do I correctly call my code after the ajax request so that the original callback gets called as well?

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

回答by dotjoe

Another option is to use the fnDrawCallbackthat is called after each draw event. Which will be done after every ajax request.

另一种选择是使用在每个绘制事件之后调用的fnDrawCallback。这将在每个 ajax 请求之后完成。

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

回答by Manse

Try this way :

试试这个方法：

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

You can then do what ever you want to do before the fnCallback(json);line - including calling a function.

然后，您可以在该fnCallback(json);行之前做任何您想做的事情——包括调用一个函数。

回答by Gyrocode.com

SOLUTION

解决方案

With DataTables 1.10 there are multiple ways to handle Ajax completion event.

在 DataTables 1.10 中，有多种方法可以处理 Ajax 完成事件。

• Using ajax.dataSrcoption:

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

• Using xhrevent:

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

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

There is one extra advantage to using xhrevent versus ajax.dataSrcoption:

使用xhr事件与ajax.dataSrc选项相比还有一个额外的优势：

As of DataTables 1.10.7 this event is triggered by both success and error conditions when the Ajax request completed (i.e. it is always triggered regardless of the outcome of the Ajax request).

从 DataTables 1.10.7 开始，当 Ajax 请求完成时，该事件由成功和错误条件触发（即无论 Ajax 请求的结果如何，它始终被触发）。

DEMO

演示

See this jsFiddlefor code and demonstration.

有关代码和演示，请参阅此 jsFiddle。

回答by yoku2010

Try This:

尝试这个：

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