DataTables deferred loading with columns option

Question

I'm using server-side processing mode ("serverSide": true) of jQuery DataTables. I'm using the deferred loading option to optimize my page load times.

I'm also using the columns option, but there is some conflict when I define the columns option myself. It tries to look for the data source when there isn't any for the first call, which is the whole point of deferred loading.

Uncaught Error: DataTables warning: table id=table - Requested unknown parameter 'id' for row 0. For more information about this error, please see http://datatables.net/tn/4

Initialization code:

function initialize_table(inital_length)
{
    table_options = {
        "serverSide": true,
        "ajax": {
            "url": '/merchant/all/',
            "type": 'POST',
            "deferRender": true,
            // data: JSON.stringify(data),
            // contentType: "application/json",
        },
        // "order": [[0, 'asc']]
        "deferRender": true,
        "processing": true,
        "pageLength": 50,
        "deferLoading": inital_length,
        "lengthMenu": [ 20, 50, 100, 200, 500 ],
        "columnDefs": [
            {
                // "class": "details-control",
                'data': 'gr_id', // response[data]
                'name': 'gr_id', 
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 0,
            },
            { 
                'data': "name",
                'name': 'name',
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 1,

            },
            { 
                'data': "address",
                'name': 'address',
                'orderable': false,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 2,
            },
            {
                'data': "category",
                'name': 'category',
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 3,
            },
            {
                'data': "chain",
                'name': 'chain',
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 4,
            },
            {
                'data': "enabled",
                'name': 'enabled',
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 5,
            },
            {
                'data': 'status',
                'name': 'status',
                'orderable': true,
                'search': {'regex': false, 'value': ''},
                'searchable': true,
                "targets": 6,
            }
        ],
    }
    var merchant_table = $("#merchant-table").DataTable(table_options);
}

Answer 1

The bug of using deferLoading option together with column.data was once reported in DataTables forums. I was able to reproduce that bug using v1.10.2 from CDN, but not using v1.10.3 onwards, so we can say that this has been fixed. This was probably fixed by the new feature "Ability to use columns.data with a DOM sourced data to read the row information into an object rather than an array".

So you can:

1) First make sure you are using the latest version.

2) Check your JSON response. According to your comments, you're using an array data source type, but when you set the column.data option, you must use object data source type instead.