jQuery DataTables loads data from controller but does not display it

Question

In short, I'm loading a list of clients (as JSON) from an MVC controller. I've verified that the data is structured properly, as well that it does get to the client. The only disconnect is that once the data is loaded, DataTables never displays it.

Here's the JavaScript that initializes the table. I'm almost positive it's configured correctly.

I use the dataSrc parameter to execute some extra code before the data is drawn. Note that it is being executed. I've stepped through just about every piece of this.

I also confirmed that $("clients table") finds the correct element.

$clientsTable = $("#clients table").DataTable({
    deferRenderer: true,
    info:true,
    lengthChange: true,
    lengthMenu: [25, 50, 75, 100],
    processing: true,
    saveState: true,
    serverSide: true,
    ajax: {
        url: "LeadScatter/Clients",
        type: "GET",
        data: function (d) {
            $.extend(d, { byPartner: $("#byPartner").val(), byEnabledDisabled: $("[name=byEnabledDisabled]:checked").val() });
        },
        dataSrc: function (data) {
            getTabState("clients").isLoaded = true;

            $("#clients .tab-content").fadeIn(_fadeTimeInMs);

            $("#clients .dataTables_filter [type=search]").focus();

            return data;
        },
        error: function (response) {
            getTabState("clients").isLoaded = false;

            selectedClient = undefined;

            $("#tabs").tabs({ disabled: defaultDisabledTabs }).tabs("option", "active", 0);

            updateSelectedClient();

            showTabLoadError("clients", response.statusText);

            if (response.status == 403) {
                alert(response.statusText, response.status);

                $("#clients").find(".dataTables_empty").text("Sorry, but you do not have permission to view Clients.");
            }
        }
    },
    columns: [
        { data: "cakeName", className: "button-cell client" },
        { data: "rpls", className: "number-cell" },
        { data: "forcePayoutIncrease", className: "number-cell" },
        { data: "allocation", className: "number-cell" },
        { data: "inMonthCap", className: "number-cell" },
        { data: "inMonthCapType", className: "number-cell" },
        { data: "toggle", className: "button-cell" },
        { data: "pushToDemo", className: "button-cell" }
    ]
});

Here's the object that DataTables is picking up. I removed extra array elements to save space. Trust that they're constructed correctly:

{
    "draw": 1,
    "recordsTotal": 784,
    "recordsFiltered": 0,
    "data": [
        {
            "id": 7689,
            "cakeName": "<input type='radio' name='selected-client' value='7689' data-id='7689' data-cake-name='aa_test1' data-grouping-id='6666' id='selected-client-aa_test1' class='' /><label for='selected-client-aa_test1' class='disabled'>aa_test1</label>",
            "rpls": 40,
            "forcePayoutIncrease": 0,
            "allocation": 0,
            "inMonthCap": 0,
            "inMonthCapType": "None",
            "enabled": true,
            "toggle": "<button type='button' class='button toggle' onclick='toggleClientEnabled(7689);'>Disable</button>",
            "pushToDemo": "<button type='button' class='button' onclick='pushClientToDemo('aa_test1');'>Push To Demo</button>"
        },
        ....
    ]
}

DataTables correctly updates the draw parameter with each subsequent request. Everything behind-the-scenes seems to work fine. Here's the HTML table where the data should be rendered:

<table border="1">
    <thead>
        <tr>
            <th>CakeName</th>
            <th>RPLS</th>
            <th>ForcePayoutIncrease</th>
            <th>Allocation</th>
            <th>In-Month Cap</th>
            <th>In-Month Cap Type</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
</table>

And finally, a screenshot of the table. It's initialized but no data is rendered. You can even see that it's getting the "recordsTotal" variable from the returned object and setting it in the footer.

Am I missing something obvious?

Answer 1

Well, this was frustrating to discover, but it turns out that the dataSrc function was causing it.

I missed in the documentation that when using that parameter as a function, you must return the collection of data that's being displayed, not the JSON object as a whole.

So this:

dataSrc: function (data) {
    return data;
}

becomes this:

dataSrc: function (data) {
    return data.data; //access the data variable from the returned JSON
}

Voila.