JQuery datatable not filling from AJAX call despite successful response

Question

I have a dot net aspx page with a table set up as a JQuery DataTable ( https://datatables.net/ ) using an AJAX call to get the data from a Web Method. The data is returned as a JSON object.

The mechanics of each part seems to be working correctly. The Web Method is called and returns a valid JSON object (according to JSONLint) and I can access and handle the returned data in the "success" callback function of the AJAX call.

However, the datatable appears on the page without any body rows, just the header and footer.

HTML section from .aspx page

<div id="divIssueDetailsTable">
    <table id="tblIssueDetails" class="table">
        <thead>
            <tr>
                <th>Team</th>
                <th>Score</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Team</th>
                <th>Score</th>
            </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>

Javascript function to create datatable (Including test code inside the success callback function to test the JSON object returned)

$('#tblIssueDetails').DataTable(
    {
        "processing": true,
        "serverSide": true,
        "cache": false,
        "destroy": true,
        "ajax":
            {
                type: "POST",
                url: "WebServices/WSGetData.asmx/ReturnIssues",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "",
                success: function (results) {
                    toastr["success"]("AJAX call succeeded.", "Success:");
                    var objJSON = $.parseJSON(results.d);
                    $(objJSON.data).each(function () {
                        alert(this.Age);
                    });
                },
                error: function(e) {
                    toastr["error"]("There has been a problem retrieving the information from the database. " + e.responseText, "Error:");
                },
                complete: function () {
                    $('#divIssueDetailsTable').show();
                }
            }
    });

What the web method is returning (test data)

d: "{ "data": [{"Name":"Freddy","Age":"23"},{"Name":"Jane","Age":"23"},{"Name":"Rod","Age":"23"}] }"

The weird thing is, all of the separate parts seem to be working correctly, but it just not refreshing the table.

I can't find any links on datatables just refusing to display data. I have tried the following:

https://datatables.net/examples/basic_init/zero_configuration.html https://datatables.net/examples/data_sources/ajax.html fill datatable with json and web service Datatables not refreshing after second network request datatables dataSrc function not called on successful ajax response

Any help much appreciated.

Answer 1

The DataTables docs on ajax say:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

By supplying your own success callback, you deprive DataTables access to the Ajax result.

You can instead use a the dataSrc callback, which takes the server response and must return the object for DataTables to use:

dataSrc: function (results) {
    toastr["success"]("AJAX call succeeded.", "Success:");
    var objJSON = $.parseJSON(results.d);
    return objJSON.data;
},