My ajax call is:

var networkslisttab = null;

...

networkslisttab = $('#networkslisttable').DataTable({
    "ajax": { "url": networkstoolboxURL, "dataType": "json", "dataSrc": '', "success": function (data) { networkslisttab.processing(false); console.log(data); }, "error": function (error) { console.log("error in networks"); } },
    //"dataSrc": '',        
    "columns": [
        {
            "data": 'reference_id',
            "width": '15%',
        },
        { "data": 'name' },
        {
            "data": 'num_points',
            "width": '15%',
        },
        {
            "data": 'num_sections',
            "width": '15%',
        }
    ],
    "order": [[0, "desc"]],
    "processing": true,
    "autoWidth": false, // need this to handle rendering issues in bootstrap and during re-size.  Note handlers at end of page.
    "scrollY": "200px",  // make it a small scrolling table
    "scrollX": true,
    "paging": false,
    "info": false,
    "language": {
        "processing": '<span style="width:100%;"><img src="/Content/icons/ajax-loader-orange-med.gif" /></span>'
    },
    "searching": false
});

console.log in "success" gives me the following json array but it is not bound to the datatable

[{reference_id: '873', name: 'MapTest', details: 'Sourced from Open Street Maps', num_points: 0, num_sections: 23}, {reference_id: '899', name: 'Albury C roads', details: 'Sourced from Open Street Maps', num_points: 0, num_sections: 0}]

but it is not bound to the table what am I missing?

Update

By removing the success and error properties, data started binding..Why?

networkslisttab = $('#networkslisttable').DataTable({
    "ajax": {
        "url": networkstoolboxURL,
        "dataSrc": ''
        
    }             
    "columns": [
        {
            "data": 'reference_id',
            "width": '15%',
        },
        { "data": 'name' },
        {
            "data": 'num_points',
            "width": '15%',
        },
        {
            "data": 'num_sections',
            "width": '15%',
        }
        
    ],
    "order": [[0, "desc"]],
    "processing": true,
    "autoWidth": false, // need this to handle rendering issues in bootstrap and during re-size.  Note handlers at end of page.
    "scrollY": "200px",  // make it a small scrolling table
    "scrollX": true,
    "paging": false,
    "info": false,
    "language": {
        "processing": '<span style="width:100%;"><img src="/Content/icons/ajax-loader-orange-med.gif" /></span>'
    },
    "searching": false
});

CodePudding user response：

As you have seen, you should not override the jQuery Ajax success option in your DataTables ajax option.

As documented here:

...the success option of ajax should not be altered - DataTables uses it internally to execute the table draw when the data load is complete.

Use the dataSrc option instead, for any custom processing you may want to do after receiving the JSON response via Ajax.

(I have not experimented with the error property of the DataTables ajax option - it may be the same situation as the success option. It's not mentioned in the documentation I linked to.)