使用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"
}]
}
$('#example').dataTable({
"aaData": JSON.parse(data.d),
"aoColumns": [
{ "mData": "UserId" },
{ "mData": "UserName" },
{ "mData": "Location" }
]
});
需要使用"aaData"解析信息:JSON.parse(data.d)一个。