jQuery 调用数据表ajax调用成功的函数

call a function in success of datatable ajax call

提问by rajan.tsm

Is that possible to invoke a javascript function in success of datatable ajax call. Here is the code am trying to use,

是否可以在数据表 ajax 调用成功时调用 javascript 函数。这是我尝试使用的代码，

var oTable = $('#app-config').dataTable(
            {
                "bAutoWidth": false,                                                
                "bDestroy":true,
                "bProcessing" : true,
                "bServerSide" : true,
                "sPaginationType" : "full_numbers",
                "sAjaxSource" : url,                    
                "fnServerData" : function(sSource, aoData, fnCallback) {
                    alert("sSource"+ sSource);
                    alert("aoData"+ aoData);
                    $.ajax({
                        "dataType" : 'json',
                        "type" : "GET",
                        "url" : sSource,
                        "data" : aoData,
                        "success" : fnCallback
                    });
                }

is it possible to have something like,

是否有可能有类似的东西，

success : function(){
    //.....code goes here
}

instead of "success" : fnCallback ------> which is last line of AJAX call. In this function I would like to check a value send from server side. Thanks in advance for any help....

而不是“成功”： fnCallback ------> 这是 AJAX 调用的最后一行。在这个函数中，我想检查从服务器端发送的值。在此先感谢您的帮助....

回答by Joseph Garrone

You can use dataSrc :

您可以使用 dataSrc ：

Here is a typical example of datatables.net

这是datatables.net的典型示例

var table = $('#example').DataTable( {
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": function ( json ) {
                //Make your callback here.
                alert("Done!");
                return json.data;
            }       
            },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }

        ]
    } );

回答by AnasSafi

You can use this:

你可以使用这个：

"drawCallback": function(settings) {
   console.log(settings.json);
   //do whatever  
},

回答by Chris

The best way I have found is to use the initCompletemethod as it fires after the data has been retrieved and renders the table. NOTEthis only fires once though.

我发现的最好方法是使用initComplete方法，因为它在检索数据并呈现表后触发。请注意，这只会触发一次。

$("#tableOfData").DataTable({
        "pageLength": 50,
        "ajax":{
            url: someurl,
            dataType : "json",
            type: "post",
            "data": {data to be sent}
        },
        "initComplete":function( settings, json){
            console.log(json);
            // call your function here
        }
    });

回答by Khalid

For datatables 1.10.12.

对于数据表 1.10.12。

$('#table_id').dataTable({
  ajax: function (data, callback, settings) {
    $.ajax({
      url: '/your/url',
      type: 'POST',
      data: data,
      success:function(data){
        callback(data);
        // Do whatever you want.
      }
    });
  }
});

回答by fgfernandez0321

The success option of ajax should not be altered because DataTables uses it internally to execute the table draw when the data load is complete. The recommendation is used "dataSrc" to alter the received data.

ajax 的成功选项不应更改，因为 DataTables 在内部使用它来在数据加载完成时执行表格绘制。建议使用“dataSrc”来更改接收到的数据。

回答by ako

Based on the docs, xhrAjax event would fire when an Ajax request is completed. So you can do something like this:

根据文档，xhr当 Ajax 请求完成时会触发 Ajax 事件。所以你可以做这样的事情：

let data_table = $('#example-table').dataTable({
        ajax: "data.json"
    });

data_table.on('xhr.dt', function ( e, settings, json, xhr ) {
        // Do some staff here...
        $('#status').html( json.status );
    } )

回答by Gianluca Demarinis

This works fine for me. Another way don't work good

这对我来说很好用。另一种方法行不通

                'ajax': {
                    complete: function (data) {
                        console.log(data['responseJSON']);
                    },
                    'url': 'xxx.php',
                },

回答by Jonny

Maybe it's not exactly what you want to do, but using the ajax complete solved my problem of hiding a spinner when the ajax call returned.

也许这不完全是您想要做的，但是使用 ajax complete 解决了我在 ajax 调用返回时隐藏微调器的问题。

So it would look something like this

所以它看起来像这样

var table = $('#example').DataTable( {
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": "",
            "success": function () {
                alert("Done!");
            }       
    },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }            
        ]
    } );

回答by ksealey

  "success" : function(data){
       //do stuff here
        fnCallback(data);
   }

回答by Zabith Rafeek

Try Following Code.

尝试以下代码。

       var oTable = $('#app-config').dataTable(
        {
            "bAutoWidth": false,                                                
            "bDestroy":true,
            "bProcessing" : true,
            "bServerSide" : true,
            "sPaginationType" : "full_numbers",
            "sAjaxSource" : url,                    
            "fnServerData" : function(sSource, aoData, fnCallback) {
                alert("sSource"+ sSource);
                alert("aoData"+ aoData);
                $.ajax({
                    "dataType" : 'json',
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : fnCallback
                }).success( function(){  alert("This Function will execute after data table loaded");   });
            }