使用ajax和c#传递json响应来填充Jquery数据表

本文关键字:填充 Jquery 数据表 响应 json ajax 传递 使用 | 更新日期: 2023-09-27 18:00:23

我想使用jQuery数据表显示数据。我正在使用Web方法从C#传递JSON响应。jQuery正在接收的数据格式正确。数据表显示了某些行的空结构和如下所示的警报:

数据表警告:表id-示例为行0请求了未知参数1。

此外,表结构在第一列显示双引号,仅此而已

我搜索了那个警报,但得到的信息一点用处都没有。有些东西我错过了。请帮我拿这个。

我的代码:

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "data_table2.aspx/BindDatatable",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(JSON.parse(data.d));
            console.log(JSON.parse(data.d));
            $('#example').dataTable({
                "aaData": data.d,
                "aoColumns": [
                    { "aaData": "UserId" },
                    { "aaData": "UserName" },
                    { "aaData": "Location" }
                 ]
            }); 
        } 
    });
});

Webmethod:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string BindDatatable()
{
    DataTable dt = new DataTable();
    dt = getData();
    List<User5> data = new List<User5>();
    foreach (DataRow dtrow in dt.Rows)
    {
        User5 user = new User5();
        user.UserId = dtrow["id"].ToString();
        user.UserName = dtrow["name"].ToString();
        user.Location = dtrow["city"].ToString();
        data.Add(user);
    }       
    System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string aaData = jSearializer.Serialize(data);
    // aaData = "{'"data'": " + aaData + "}";
    return aaData;
}

jQuery接收的数据是:

[{
    "UserId": "2",
    "UserName": "Nitin",
    "Location": "Mumbai"
}, {
    "UserId": "3",
    "UserName": "NAkshay",
    "Location": "Thane"
}, {
    "UserId": "4",
    "UserName": "Nil",
    "Location": "Pune"
}, {
    "UserId": "5",
    "UserName": "Vinit",
    "Location": "KArve nagar"
}, {
    "UserId": "6",
    "UserName": "Rahul",
    "Location": "Kothrud"
}, {
    "UserId": "7",
    "UserName": "Pravin",
    "Location": "Hinjewadi"
}, {
    "UserId": "8",
    "UserName": "Pavan",
    "Location": "Mg City"
}]

如果我删除了c#代码中的注释行,o/p将是

{
    "data": [{
        "UserId": "2",
        "UserName": "Nitin",
        "Location": "Mumbai"
    }, {
        "UserId": "3",
        "UserName": "NAkshay",
        "Location": "Thane"
    }, {
        "UserId": "4",
        "UserName": "Nil",
        "Location": "Pune"
    }, {
        "UserId": "5",
        "UserName": "Vinit",
        "Location": "KArve nagar"
    }, {
        "UserId": "6",
        "UserName": "Rahul",
        "Location": "Kothrud"
    }, {
        "UserId": "7",
        "UserName": "Pravin",
        "Location": "Hinjewadi"
    }, {
        "UserId": "8",
        "UserName": "Pavan",
        "Location": "Mg City"
    }]
}

使用ajax和c#传递json响应来填充Jquery数据表

 $('#example').dataTable({
              "aaData": JSON.parse(data.d),
              "aoColumns": [
              { "mData": "UserId" },
              { "mData": "UserName" },
              { "mData": "Location" }
                ]
        });

需要使用"aaData"解析信息:JSON.parse(data.d)一个。