javascript - 尽管响应成功，但 JQuery 数据表未从 AJAX 调用中填充

Question

我有一个点网 aspx 页面，其中一个表设置为 JQuery DataTable ( https://datatables.net/ )，使用 AJAX 调用从 Web 方法获取数据。数据作为 JSON 对象返回。

每个部分的机制似乎都在正常工作。 Web 方法被调用并返回一个有效的 JSON 对象(根据 JSONLint)，我可以在 AJAX 调用的“成功”回调函数中访问和处理返回的数据。

但是，数据表出现在没有任何正文行的页面上，只有页眉和页脚。

.aspx 页面的 HTML 部分

<div id="divIssueDetailsTable">
    <table id="tblIssueDetails" class="table">
        <thead>
            <tr>
                <th>Team</th>
                <th>Score</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Team</th>
                <th>Score</th>
            </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>

创建数据表的Javascript函数(在成功回调函数中包含测试代码以测试返回的JSON对象)

$('#tblIssueDetails').DataTable(
    {
        "processing": true,
        "serverSide": true,
        "cache": false,
        "destroy": true,
        "ajax":
            {
                type: "POST",
                url: "WebServices/WSGetData.asmx/ReturnIssues",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "",
                success: function (results) {
                    toastr["success"]("AJAX call succeeded.", "Success:");
                    var objJSON = $.parseJSON(results.d);
                    $(objJSON.data).each(function () {
                        alert(this.Age);
                    });
                },
                error: function(e) {
                    toastr["error"]("There has been a problem retrieving the information from the database. " + e.responseText, "Error:");
                },
                complete: function () {
                    $('#divIssueDetailsTable').show();
                }
            }
    });

网络方法返回了什么(测试数据)

d: "{ "data": [{"Name":"Freddy","Age":"23"},{"Name":"Jane","Age":"23"},{"Name":"Rod","Age":"23"}] }"

奇怪的是，所有独立的部分似乎都正常工作，但它只是不刷新表格。

我在数据表上找不到任何链接，只是拒绝显示数据。我尝试了以下方法:

https://datatables.net/examples/basic_init/zero_configuration.html https://datatables.net/examples/data_sources/ajax.html fill datatable with json and web service Datatables not refreshing after second network request datatables dataSrc function not called on successful ajax response

非常感谢任何帮助。

Answer 1

ajax 上的 DataTables 文档说:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

通过提供您自己的 success 回调，您剥夺了 DataTables 对 Ajax 结果的访问权。

您可以改为使用 dataSrc 回调，它接受服务器响应并且必须返回对象供 DataTables 使用:

dataSrc: function (results) {
    toastr["success"]("AJAX call succeeded.", "Success:");
    var objJSON = $.parseJSON(results.d);
    return objJSON.data;
},