Datatables AJAX with specific payload

niden

Greetings

I have an app that every JSON payload that is returned to the UI has a specific structure. This applies to datatables related AJAX responses. The payload structure is as follows:

{
  "code": 2000,
  "message": "",
  "payload": {
    "draw": 1,
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
      {
        "actions": "data",
        "email": "email@email.com",
        "status": "Active",
        "employee": "employee",
        "created": "2017-08-21 01:02:03",
        "updated": "2017-10-30 14:32:46"
      },
      {
        "actions": "data",
        "email": "email2@email.com",
        "status": "Active",
        "employee": "employee2",
        "created": "2017-08-21 01:02:03",
        "updated": "2017-08-21 01:02:03"
      }
    ]
  }
}

For the JS part of datatables I have tried this:

$(document).ready(
    function () {
        $('#dataTableContainer').DataTable(
            {
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/system/users/get',
                    type: 'POST',
                    dataSrc: 'payload.data',
                },
                columns: [...]
            }
        );
    }
);

That works just fine but at the top of the datatable I see

Showing 0 to 0 of 0 entries (filtered from NaN total entries)

Unless I am mistaken I have a feeling that this is because datatables cannot find the "recordsTotal" and "recordsFiltered"

In the JS part I tried using "dataSrc: 'payload'" but that did not work. I also tried this:

                ajax: {
                    url: '/system/users/get',
                    type: 'POST',
                    // dataSrc: 'payload.data',
                    data: function (response) {
                        return response.payload;
                    }
                },

Any pointers are more than appreciated.

Thanks!

niden

This can be marked as solved