[英]How to display data in as a table using Jquery/Ajax Call?
I am returning a DataSet using Ajax/Jquery call to the client. 我正在使用Ajax / Jquery调用将DataSet返回到客户端。 I want to display this data as a table.
我想将此数据显示为表格。 But I am not sure How I can do this?
但是我不确定该怎么做? Also I would want to add one clickable linkbutton or something in each row.
我也想在每行中添加一个可单击的linkbutton或其他内容。
Server Side: 服务器端:
[System.Web.Services.WebMethod]
public static string GetPopUpDataWM()
{
//return "Hello " + name + Environment.NewLine + "The Current Time is: "
// + DateTime.Now.ToString();
DataTable table = new DataTable();
table.Columns.Add("Dosage", typeof(int));
table.Columns.Add("Drug", typeof(string));
table.Columns.Add("Patient", typeof(string));
table.Rows.Add(25, "Indocin", "David");
table.Rows.Add(50, "Enebrel", "Sam");
table.Rows.Add(10, "Hydralazine", "Christoff");
table.Rows.Add(21, "Combivent", "Janet");
table.Rows.Add(100, "Dilantin", "Melanie");
return JsonConvert.SerializeObject(table);
}
Client Side: 客户端:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "test1.aspx/GetPopUpDataWM",
data: "{}",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
Console.log(data.d[i].UserId);
$("#tbDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>");
}
},
error: function (result) {
alert("Error");
}
});
});
</script>
<script type = "text/javascript">
</script>
<table id="tbDetails">
<tbody>
<tr>
<td>Code</td><td>Description</td>
</tr>
<tr>
<td>100</td><td>abc</td>
<td>101</td><td>mno</td>
<td>102</td><td>xyz</td>
</tr>
</tbody>
</table>
Response: 响应:
[{"Dosage":25,"Drug":"Indocin","Patient":"David"},
{"Dosage":50,"Drug":"Enebrel","Patient":"Sam"},
{"Dosage":10,"Drug":"Hydralazine","Patient":"Christoff"},
{"Dosage":21,"Drug":"Combivent","Patient":"Janet"},
{"Dosage":100,"Drug":"Dilantin","Patient":"Melanie"}]
Try var jObject = $("#tbDetails").find('<tbody>').append(... jObject.click(yourFunction);
试试
var jObject = $("#tbDetails").find('<tbody>').append(... jObject.click(yourFunction);
However you can't use data.d[i].UserId but : 但是,您不能使用data.d [i] .UserId,但:
$.each(data, function( index, value ) {
echo value['Dosage']
});
one more thing : you can test the length with data.length et not data.d.length :) 还有一件事:您可以使用data.length而不是data.d.length来测试长度:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.