jQuery 数据表 ajax 回调答案

【问题标题】：jQuery datatables ajax callbackjQuery 数据表 ajax 回调
【发布时间】：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 请求后正确调用我的代码，以便同时调用原始回调？

【问题讨论】：

标签： javascript jquery datatables jquery-events

【解决方案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(););
}

【讨论】：