成功调用数据表ajax调用的函数答案

【问题标题】：call a function in success of datatable ajax call成功调用数据表ajax调用的函数
【发布时间】：2013-03-25 01:45:25
【问题描述】：

是否可以在数据表 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
                    });
                }

有没有可能有类似的东西，

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

而不是 "success" : fnCallback ------> 这是 AJAX 调用的最后一行。在此功能中，我想检查从服务器端发送的值。在此先感谢您的帮助....

【问题讨论】：

有可能。你试过了吗？
您将参数传递给FnServerData 作为对$.ajax 的回调。你想改用什么？
感谢您回复德沃夏克。函数 fnCallback(){ 警报("fnCallback");我尝试调用这个方法。所以我将回调作为参数传递给 FnserverData。如果它没有传递到 FnServerData 中，它会继续处理而不报告任何错误。
我在这个函数中尝试了success : function(){ //.....code goes here }，我发出了警报。我得到了正确的警报信息。但数据表没有加载
那么你有一个不同的问题，而不是如何在 ajax 成功上做某事。

标签： javascript jquery ajax datatables

【解决方案1】：

你可以使用 dataSrc ：

这里是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" }
        
        ]
    } );

【讨论】：

它对我有用，但不是返回“json.data”只返回“json”，谢谢

【解决方案2】：

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

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

【讨论】：

有趣。我来这里是为了获得“成功”的语法，但事实证明这是在填充表格之前发生的。 “完成”工作完美。

【解决方案3】：

基于the docs，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 );
    } )

【讨论】：

【解决方案4】：

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

所以它看起来像这样

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

尝试以下代码。

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

【讨论】：

【解决方案7】：

我发现的最佳方法是使用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
        }
    });

【讨论】：

是的，我需要在 jquery 数据表中的文本框上应用日期时间选择器，所以我必须在页面上呈现所有行之后添加它，
除非你刷新表，否则initComplete不会再被调用，因为它已经被初始化了。
如果你使用dataTable.draw()，这个函数将不起作用。改为在 ajax 中使用 dataSrc。
恕我直言，此功能需要编辑器！请参阅：编辑器初始化完成事件。请注意 - 此属性需要 DataTables 的编辑器扩展。 editor.datatables.net/reference/event/initComplete
@Harm 我已在我的回答中链接到 Datatables 基本版本中的函数文档。我不使用编辑器扩展。在某些情况下，AnasSafi 的回答似乎效果更好。

【解决方案8】：

对于数据表 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.
      }
    });
  }
});

【讨论】：

对我来说，这会停止填充表格的过程。

【解决方案9】：

你可以用这个：

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

【讨论】：

完美使用 DataTables 1.10.10, Jquery 2.1.1。
非常感谢@AnasSafi 从昨天开始我一直在努力解决这个问题。我尝试在行中的输入字段上调用其他 javascript 以进行计算，并使用 "initComplete" 但这没有用，但 "drawCallback" 救了我的命。
这是问题的解决方案，特别是如果您使用服务器端处理来绘制数据表。
任何遇到问题的人，请将您的 DataTables 更新到最新版本并使用“drawCallback”使其工作，简单的救生功能。谢谢。
谢谢哥们。以前我写了一个讨厌的代码（设置超时调用一个函数：'D）在ajax数据表加载后调用一个函数。这个解决方案挽救了我的一天，我摆脱了那些讨厌的代码。这是迄今为止最好的解决方案。