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?

I have described in the OP that this JSON is returned by the server and is filled to the datatables and I want to assign the balance parameter of this JSON to some javascript variable (i.e parse it) — gdrt
– gdrt, Commented May 7, 2015 at 12:36

unconditional · Accepted Answer · 2015-05-07 12:39:33Z

29

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

answered May 7, 2015 at 12:39

unconditional

7,7641 gold badge20 silver badges33 bronze badges

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

Comments

Ruan Mendes · Accepted Answer · 2017-01-25 18:03:33Z

6

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

edited Jan 25, 2017 at 18:03

answered May 7, 2015 at 12:50

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Comments

Hula_Zell · Accepted Answer · 2017-12-15 16:50:38Z

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)

Collectives™ on Stack Overflow

How to parse JSON received from Datatables ajax call?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related