Question

这是我第一次使用Jquery数据表。

我不知道我的代码有什么问题，但是数据不会加载到数据表中。这是脚本：

$(document).ready(function () {


        $.ajax({
            type: "POST",
            url: "TestDPRDetail.aspx/GetdtbScenario",
            contentType: "application/json;charset=utf-8",
            datatype: "json",
            success: function (data) {
                $('#grvScenario').dataTable({
                    data: data,
                    columns:
                    [
                        { "data": "SCENARIO_ID" }
                    ]
                });
            },
        });


    });

URL：TestDPRDetail.aspx / GetdtbScenario返回一个数据表json序列化对象

    <System.Web.Script.Services.ScriptMethod()> _
<WebMethod()> _
Public Shared Function GetdtbScenario() As Object
    Dim dtbScenarioTemp As New DataTable
    Dim strDPR_ID As String
    Dim clsScenarioBusiness As New ScenarioBusiness
    Dim json As Newtonsoft.Json.JsonConvert

    strDPR_ID = "DPR-201807-00001"
    dtbScenarioTemp = clsScenarioBusiness.GetdtbScenario(strDPR_ID) 'getting data from sql

    Return json.SerializeObject(dtbScenarioTemp)
End Function

我检查了一个普通方法（使用数组对象）来加载数据表，它工作正常：

 var dataTemp = [{ "SCENARIO_ID": "SCN-201807-00008", "SCENARIO #": "B", "SCENARIO NAME": "Test Inquiry", "CONDITION": "Negative" }]

        $('#grvScenario').dataTable({
            data: dataTemp,
            columns: [
                {"data":"SCENARIO_ID"}
            ]
        });

这是HTML：

<body>
<form id="form1" runat="server">
    <div>
        <table id="grvScenario">
            <thead>
                <tr>
                    <th>Scenario ID</th>
                </tr>
            </thead>
        </table>
    </div>
</form>
</body>

ajax或数据表中是否缺少某些内容？

Answer 1

尝试首先初始化数据表：

$(document).ready(function () {

  $('#grvScenario').dataTable({
    ajax: "TestDPRDetail.aspx/GetdtbScenario",
    columns: [
      { "data": "SCENARIO_ID" }
    ]
  })

});

Answer 2

经过反复试验，我得到了答案

在ajax调用之后，TestDPRDetail.aspx / GetdtbScenario似乎返回了另一个json对象。

需要在javascript中再次解析返回变量（数据）。因此它将如下所示：

$.ajax({
        type: "POST",
        url: "TestDPRDetail.aspx/GetdtbScenario",
        contentType: "application/json;charset=utf-8",
        datatype: "json",
        success: function (data) {
            $('#grvScenario').dataTable({
                data: JSON.parse(data.d),
                columns:
                [
                    { "data": "SCENARIO_ID" }
                ]
            });
        },
    });

希望它可以帮助遇到相同问题的任何人

jQuery Datatable：数据不会使用ajax加载

2 个答案: