Resolved: Why will data not bind if success and error are defined - datatables ajax

Question:

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 decoding="async" 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 decoding="async" src="/Content/icons/ajax-loader-orange-med.gif" /></span>'
    },
    "searching": false
});

Answer:

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.)

If you have better answer, please add a comment about this, thank you!

Resolved: Why will data not bind if success and error are defined – datatables ajax

Resolved: Modify entity using Action in C#

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Leave A Reply