Javascript jQuery DataTables从控制器加载数据，但不显示它

简而言之，我正在从MVC控制器加载一个客户机列表（作为JSON）。我已经验证了数据的结构是否正确，以及它是否能够到达客户机。唯一的区别是，一旦加载了数据，DataTables就不会显示它

下面是初始化表的JavaScript。我几乎可以肯定它的配置是正确的

在绘制数据之前，我使用

dataSrc

参数执行一些额外的代码。注意，它正在被执行。我已经把每一件事都讲了一遍

我还确认

$（“客户表”）

找到了正确的元素

$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" }
    ]
});

这是DataTables正在拾取的对象。我删除了额外的数组元素以节省空间。请相信它们构造正确：

{
    "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>"
        },
        ....
    ]
}

最后是表格的屏幕截图。它已初始化，但未呈现任何数据。您甚至可以看到它从返回的对象中获取“recordsTotal”变量并在页脚中进行设置

---

我错过了什么明显的东西吗

嗯，这是令人沮丧的发现，但事实证明是

dataSrc

函数引起的

我在文档中没有提到，当使用该参数作为函数时，必须返回正在显示的数据集合，而不是整个JSON对象

因此：

dataSrc: function (data) {
    return data;
}

变成这样：

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

---

瞧。

@Jakotheshadows还得等两天。我想知道我是否能在发布时选择。

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