首页 > 解决方案 > Jquery Datatable:数据不会使用ajax加载

问题描述

这是我第一次使用 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 或数据表中遗漏了什么吗?

标签: ajaxvb.netdatatables

解决方案


尝试先初始化数据表:

$(document).ready(function () {

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

});

推荐阅读