CODEWITHSUNDEEP
jqueryajaxdatatables
Andy
Andy

Reputation: 5395

DataTables read ajax response with your own parameters

Using DataTables 1.10.15 in Server Side mode. I've created a PHP script to provide a JSON response which includes the parameters they mention in the documentation: https://datatables.net/manual/server-side#Returned-data

I want to add my own parameters to the JSON response, e.g.

$response = [
    'data' => [ ], // Required by DataTables 
    'form_errors' => [ ] // Not required by DataTables
];
echo json_encode($response);

The js which I have for the ajax call looks like this:

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
});

How can I read the ajax response? I've seen in the API that there is a .on('xhr') method (https://datatables.net/reference/event/xhr) which fires when the ajax request has been completed, e.g.

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
}).on( 'xhr.dt', function () {
    // Read response here?
});

But I cannot find a way to read the ajax response data at that point.

Does anyone know if this is possible?

Upvotes: 10

Views: 31366

Answers (5)

Kolya Slisarenko
Kolya Slisarenko

Reputation: 71

You should implement dataFilter function:

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": {
        "url" : "/response.php",
        "method" : "POST",
        dataFilter: function (data) {
            data = jQuery.parseJSON(data);

            return JSON.stringify(data.data.original);
        }.bind(this)
    }
});

Upvotes: 0

Ali Jamal
Ali Jamal

Reputation: 1559

This should be ajax property of DataTable

"dataSrc": function(json) {
if (json.CustomVariable) {
    $("#some_span").html(json.CustomVariable);
}
// You can also modify `json.data` if required
return json.data;

A full example according to the code in question can be

var myTable = $('#myTable').DataTable({
            "serverSide": true,
            "ajax": {
                "url": "/response.php",
                "method": "POST",
                "dataSrc": function(json) {
                    if (json.CustomVariable) {
                        $("#some_span").html(json.CustomVariable);
                    }
                    // You can also modify `json.data` if required
                    return json.data;
                },
            });

Reference DataTables > Return custom variables from server side to datatables ajax call

Upvotes: 3

Idham Perdameian
Idham Perdameian

Reputation: 2277

Old question, but i'll try to answer may need for future, because i have exactly same problem and after looking for their documentation i found drawCallback.

From your code:

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
    "drawCallback": function (settings) { 
        // Here the response
        var response = settings.json;
        console.log(response);
    },
});

Upvotes: 25

markpsmith
markpsmith

Reputation: 4918

You can do it like this, after the initialisation code block:

myTable.on('xhr', function () {
        var json = oTable.ajax.json();
        if (json) {
             // read the json here: json.form_errors
         }
});

Upvotes: 0

Julien 'JS'
Julien 'JS'

Reputation: 149

You can read the response with ajax callback methods like that :

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
    success: function(data) {
      // Request success
      console.log(data);       
    },
    error: function(data) {
      // Request failed
      console.log(data);
    }
});

I hope it helped you !

Upvotes: -1

Related Questions