jQuery 数据表 ajax 回调

Posted 2023-05-07

【中文标题】jQuery 数据表 ajax 回调

【英文标题】：jQuery datatables ajax callback

【发布时间】：2011-12-01 19:35:27

【问题描述】：

我正在使用 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 请求后正确调用我的代码，以便同时调用原始回调？

【参考方案1】：

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

"fnDrawCallback" : function() 
    update_editable();

【讨论】：

这就像一个魅力！但是它每次都会触发像 jQueryUI 对话框这样的 AJAX 函数，所以想在这里分享一下，如果你要绑定一个函数，首先需要取消绑定事件才能工作.. IE: "fnDrawCallback": function() $("#ask_container" ).find('a[href^="includes/view"].t3_txt').unbind("click"); $("#ask_container").find('a[href^="includes/view"].t3_txt').on("click",function(b)b.preventDefault(); var ce=$(this ).attr("href"); ...你的函数的其余部分在这里！

密钥（以前是 fnDrawCallback）现在是 drawCallback（从 1.10 开始）。此外，该函数接收settings 对象作为第一个参数。

@basic6 虽然文档说settings 对象不是可选的，但不传递任何内容也可以。知道为什么/如何？

@Sterex：什么都没通过？ DataTables 将该设置对象传递给您的回调。是否使用它取决于您。

【参考方案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); 行之前做任何您想做的事情 - 包括调用函数。

【讨论】：

我看过了，但它强制执行 GET，我可能会将大量数据传回服务器。我想坚持使用 POST。

@BobBaddeley 更新了我的答案 - 未经测试

经过测试，还是不行。它看起来等同于我在原始问题中发布的内容。不过，谢谢。

【参考方案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 请求的结果如何，它总是被触发）。

演示

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

【参考方案4】：

试试这个：

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