jQuery datatables ajax callback

Question

I am using jQuery DataTables and doing server-side data. I'm trying to call a function when the ajax call returns. I tried inserting this fnCallback2 which calls my function and the original function, but jQuery just throws an error (and doesn't tell me what the error is) and skips out.

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

I also tried adding the fnInitComplete parameter, but that only gets called the first time, not after subsequent pages.

"fnInitComplete": function(){
update_editable();
},

How do I correctly call my code after the ajax request so that the original callback gets called as well?

dotjoe · Accepted Answer · 2011-10-05 21:37:50Z

28

Another option is to use the fnDrawCallback that is called after each draw event. Which will be done after every ajax request.

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

answered Oct 5, 2011 at 21:37

dotjoe

27.1k5 gold badges66 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jean G.T Over a year ago

That worked like a charm! However it was firing AJAX functions like jQueryUI dialogs each time, so thought to share here that if you are binding a function firstly need to unbind the event to work.. 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"); ... the rest of your function goes here!

basic6 Over a year ago

The key (which used to be fnDrawCallback) is now drawCallback (since: 1.10). Also, the function receives a settings object as first argument.

Sterex Over a year ago

@basic6 Although the documentation says the settings object is NOT optional, passing nothing also works. Any idea why/how?

basic6 Over a year ago

@Sterex: Passing nothing? DataTables is passing that settings object to your callback. Whether you use it or not is up to you.

Gyrocode.com · Accepted Answer · 2017-05-19 04:08:59Z

SOLUTION

With DataTables 1.10 there are multiple ways to handle Ajax completion event.

Using ajax.dataSrc option:

var table = $("#example").DataTable({
     serverSide: true,
     ajax: {
         url: "/test/0",
         dataSrc: function(d){

             // TODO: Insert your code

             return d.data;    
         }
     }
});

Using xhr event:

$("#example").on('xhr.dt', function(e, settings, json, xhr){
    // TODO: Insert your code
});

var table = $("#example").DataTable({
     serverSide: true,
     ajax: {
         url: "/test/0"
     }
});

There is one extra advantage to using xhr event versus ajax.dataSrc option:

As of DataTables 1.10.7 this event is triggered by both success and error conditions when the Ajax request completed (i.e. it is always triggered regardless of the outcome of the Ajax request).

DEMO

See this jsFiddle for code and demonstration.

Manse · Accepted Answer · 2011-10-05 21:23:24Z

8

Try this way :

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

You can then do what ever you want to do before the fnCallback(json); line - including calling a function.

edited Oct 5, 2011 at 21:23

answered Oct 5, 2011 at 21:17

Manse

38.1k11 gold badges88 silver badges112 bronze badges

3 Comments

Bob Baddeley Over a year ago

I looked at that, but it forces a GET, and I'm potentially passing a lot of data back to the server. I'd like to stick with POST.

Manse Over a year ago

@BobBaddeley Updated my answer - untested

Bob Baddeley Over a year ago

After testing, it didn't work. It looks to be equivalent to what I posted in the original question. Thanks, though.

yoku2010 · Accepted Answer · 2012-03-27 08:23:41Z

0

Try This:

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

answered Mar 27, 2012 at 8:23

yoku2010

6001 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery datatables ajax callback

4 Answers 4

4 Comments

SOLUTION

DEMO

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

SOLUTION

DEMO

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related