How to parse JSON received from Datatables ajax call?

Question

I can successfully fill my datatable with ajax call, but then I don't know how to parse JSON that is received by datatable with this ajax call.

Here is my JavaScript code, that makes ajax call to the server and fills my datatable correctly:

$('#transactions').DataTable({
        "processing": true,
        "ajax": {
            "url": "/transactions
        },
        "columns": [
            { "data": "car"},
            { "data": "card_number"},
            { "data": "invoice"},
            { "data": "status"}
        ]
    });

This is the JSON object returned from the server:

{
  "data": [
    {
      "car": 190,
      "card_number": "6395637",
      "invoice": 200,
      "status": "success"
    },
    {
      "car": 191,
      "card_number": "9473650",
      "invoice": 180,
      "status": "success"
    }
  ],
  "balance": 7300
}

As you can see, the data parameter of the returned JSON object is used by the datatables function to fill by datatables, and now I want to parse the balance parameter, but I can't. How can i achieve this?

Answer 1

Something like this:

$('#transactions').dataTable({
    "ajax" : {
        "url" : "/transactions",
        "dataSrc" : function (json) {
            // manipulate your data (json)
            ...

            // return the data that DataTables is to use to draw the table
            return json.data;
        }
    }
});

Docs: https://datatables.net/reference/option/ajax.dataSrc

Answer 2

Since DataTables 1.10, you may use the ajax.json() function: https://datatables.net/reference/api/ajax.json() I have implemented it in the example code below.

$( document ).ready(function() {
  $('#search-form').submit(function(e) {
    e.preventDefault();
    var table = $('#location-table').DataTable({
      destroy: true,
      ajax: "/locations.json",
      columns: [
        { "data": "code" },
        { "data": "status" },
        { "data": "name" },
        { "data": "region" },
        { "data": "address" },
        { "data": "city" },
        { "data": "state" },
        { "data": "zip" },
        { "data": "phone_number" },
      ]
    })
  table.on( 'xhr', function () {
    var json = table.ajax.json();
    $('#totals').text(json.totals)
  });
  })
});

NOTE for this to work you must initialize the datatable with $('#location-table').DataTable() and not $('#location-table').dataTable (the difference being the capitalized D)

Answer 3

Don't use the url feature of DataTable, make the Ajax call yourself

$.getJSON('/transactions', function(response) {
  $('#transactions').dataTable({
    processing: true,
    data: response.data,
    columns: [
      { data: "car"},
      { data: "card_number"},
      { data: "invoice"},
      { data: "status"}
    ]
  });
  window.someGlobalOrWhatever = response.balance
});