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

Question

简而言之，我正在从 MVC 控制器加载客户端列表（作为 JSON）。我已验证数据结构正确，并且确实 到达了客户端。唯一的区别是，一旦数据被加载，DataTables 就永远不会显示它。

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

我使用dataSrc 参数在绘制数据之前执行一些额外的代码。请注意，它 正在 被执行。我已经逐步完成了这一切。

我还确认$("clients table") 找到了正确的元素。

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

DataTables 会在每个后续请求中正确更新draw 参数。幕后的一切似乎都运行良好。这是应该呈现数据的 HTML 表：

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

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

我是否遗漏了一些明显的东西？

Answer 1

嗯，这令人沮丧，但事实证明是 dataSrc 函数导致了它。

我在文档中遗漏了当将该参数用作函数时，您必须返回正在显示的数据集合，而不是整个 JSON 对象。

所以这个：

dataSrc: function (data) {
    return data;
}

变成这样：

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

瞧。