尽管响应成功,但JQuery数据表仍无法从AJAX调用中填充

时间:2017-03-09 16:55:10

标签: javascript jquery json ajax datatable

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

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

但是,数据表显示在页面上没有任何正文行,只有页眉和页脚。

.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();
                }
            }
    });

Web方法返回的内容(测试数据)

  

d:“{”data“:   [{ “名称”: “弗雷迪”, “时代”: “23”},{ “名称”: “简”, “时代”: “23”},{ “名称”: “棒”, “年龄”: “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

任何帮助都非常感激。

1 个答案:

答案 0 :(得分:4)

ajax上的DataTables文档说:

  

success - 必须,因为它在DataTables内部使用。要操作/转换服务器返回的数据,请使用ajax.dataSrc(上面),或使用ajax作为函数(如下)。

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

您可以使用dataSrc回调来获取服务器响应,并且必须返回DataTables要使用的对象:

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