web-dev-qa-db-ja.com

jquery datatables ajaxコールバック

私は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リクエストの後にコードを正しく呼び出すにはどうすればよいですか？

javascriptjqueryjavascript-eventsjquery-datatables
20
Bob Baddeley

別のオプションは、各描画イベントの後に呼び出される fnDrawCallback を使用することです。これは、すべてのajaxリクエストの後に行われます。

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

この方法を試してください：

_"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);行の前に、関数の呼び出しを含め、やりたいことをすべて実行できます。

8
ManseUK

解決

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 を参照してください。

6
Gyrocode.com

これを試してください：

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