javascript - jQuery DataTables 从 Controller 加载数据但不显示它

Question

简而言之，我正在从 MVC Controller 加载客户端列表(作为 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
}

瞧。