DataTable silently failing to initialize

Question

I'm struggling to get my head around the jQuery DataTables library. I've finally got an AJAX call working with a Web Forms Web Method (ugly I know), and I'm receiving a JSON response successfully, but the table is empty. What have I done wrong?

I have a simple table like so:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Project ID</th>
            <th>Project Name</th>
            <th>Project Launch Name</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Project ID</th>
            <th>Project Name</th>
            <th>Project Launch Name</th>
        </tr>
    </tfoot>
</table>

And I'm initializing the data table on documentready:

$('#example').dataTable({
    "dom": "frtS",
    "scrollY": "300px",
    "deferRender": true,
    "ajax": {
        "dataType": "json",
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url": "Default.aspx/GetSearchResults",
        "dataSrc": function (json) {
            return $.parseJSON(json.d);
            //return json.d;
        },
        "columns": [
            { "data": "ProjectID" },
            { "data": "ProjectName" },
            { "data": "ProjectLaunchName" }
        ]
    }
});

And my JSON response is valid (according to the DataTables specs, the JSON requires a root 'data' object), for instance:

{
    "data": [
        {
            "ProjectID": 100850,
            "ActivityTypeID": 1,
            "ProjectName": "Test Project",
            "ProjectLaunchName": "Test Project",
            "Status": "Deleted"
        }
    ]
}

I'm unable to get the table to populate, despite following all examples I've found. I'm not getting any error messages, the table just has 0 rows in it. Have I missed something obvious? I've tried to use the standard json.d response, instead of parsing it, but that fails as well.

Any thoughts?

EDIT:

I use the below .NET Web Forms WebMethod (again, terrible I know, but my hand is forced) to return the JSON object from the server. Note how I wrap the JSON with the data object to conform to the spec in DataTables documentation:

<WebMethod()>
Public Shared Function GetSearchResults() As String
    Dim bo As New Business.ProjectSearch
    Dim searchCriteria As New Entities.ProjectSearchCriteria

    Dim searchResults As List(Of Entities.ProjectSearchResult) = bo.SearchProjects(searchCriteria, 1).Take(10).ToList()

    Dim wrapper = New With {Key .data = searchResults}
    Return JsonConvert.SerializeObject(wrapper)
End Function

The full JSON response is as follows:

{
    "data": [
        {
            "ProjectID": 101296,
            "ActivityTypeID": 1,
            "ProjectName": "Test Project",
            "ProjectLaunchName": "asdasdkljasd",
            "Status": "Active",
            "LaunchDate": null,
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101295,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2020-12-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101294,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": null,
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101293,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2018-01-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101292,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-09-30T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101291,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Deleted",
            "LaunchDate": null,
            "ProjectClassification": 4,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101290,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-08-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101289,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2017-02-28T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101288,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Terminated",
            "LaunchDate": "2018-04-30T00:00:00",
            "ProjectClassification": 3,
            "PageUrl": "ProductInnovation.aspx"
        },
        {
            "ProjectID": 101287,
            "ActivityTypeID": 1,
            "ProjectName": "Test project",
            "ProjectLaunchName": "Test project",
            "Status": "Active",
            "LaunchDate": "2016-01-31T00:00:00",
            "ProjectClassification": 0,
            "PageUrl": "ProductInnovation.aspx"
        }
    ]
}

I've also found that if I create a text file on the server containing the above JSON, DataTables initialized successfully:

$('#example').dataTable({
    "ajaxSource": "data/objects.txt",
    "columns": [
      { "data": "ProjectID" },
      { "data": "ProjectName" },
      { "data": "ProjectLaunchName" }
    ]
});

Additionally, the requested console.log(json) screenshot below. Clearly it can't be right. Note that this line of code is added BEFORE the json object manipulation.

If I comment out the for() loop that manipulates the JSON, the console.log(json) looks correct, which is strange because the manipulation occurs after console.log:

Answer 1

SOLUTION

Use initialization code below instead:

$('#example').dataTable({
    "dom": "frtS",
    "scrollY": "300px",
    "deferRender": true,
    "ajax": {
        "dataType": "json",
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url": "Default.aspx/GetSearchResults",
        "data": function (d) {
           return JSON.stringify(d);
        },
        "dataSrc": function(json){
           json = $.parseJSON(json.d);

           return json.data;
        },
        "columns": [
            { "data": "ProjectID" },
            { "data": "ProjectName" },
            { "data": "ProjectLaunchName" }
        ]
    }
});