[英]How to update an HTML table through AJAX call?
伙計們,我在ASP.net MVC home
視圖中有一個html表。 現在,表最初是通過模型中存在的數據填充的。 現在,單擊主頁上的某些按鈕后,我想更新表中存在的數據,即清除表中存在的數據,並使用ajax調用中的數據進行更新。
這是我的表格:
<article class="scrlable">
<table>
<tr>
<td>#</td>
<td>Name</td>
<td>Status</td>
<td>Since</td>
</tr>
@{
int srno = 1;
foreach (var pendingResponseModel in Model.hrPendingResponseList)
{
<tr>
<td>@srno</td>
<td>@pendingResponseModel.CandidateName</td>
<td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
@if (pendingResponseModel.DayDifference == "1")
{
<td>@(pendingResponseModel.DayDifference) day</td>
}
else
{
<td>@(pendingResponseModel.DayDifference) days</td>
}
</tr>
srno++;
}
}
</table>
</article>
這是我的ajax電話:
function GetStatusWise(control, departCode) {
$.ajax(
{
type: "GET",
url: "...URL..." + departCode,
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
$.each(data.data, function (index, value) {
// UPDATE TABLE HERE...
});
},
error: function (x, e) {
alert('There seems to be some problem while fetching records!');
}
}
);
}
從ajax調用返回的數據為JSON。 它具有名稱,狀態和自元素。 他們可以通過觀看value.CandidateName
, value.Status
等
現在,我想用通過AJAX調用獲取的值更新上表的值。 我將如何去做? 是否可以替換整篇文章?
注意:我通過ajax調用獲得了多個值,這就是為什么我在函數上放了一個循環。
我已經通過以下代碼解決了我的問題
function GetStatusWise(control, departCode) {
$.ajax(
{
type: "GET",
url: WebApiURL + ".....URL...." + departCode,
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
var srno = 1;
$('#tblPendingHrResponse').find($('.trTblPendingHrResponse')).remove();
$.each(data.data, function (index, value) {
random(value, srno);
srno++;
});
},
error: function (x, e) {
alert('There seems to be some problem while fetching records!');
}
}
);
}
。
function random(values, srno) {
var daydifference = values.DayDifference == 1 ? '<td>' + values.DayDifference + ' day </td>' : '<td>' + values.DayDifference + ' days </td>';
var tr = '<tr class="trTblPendingHrResponse">' +
'<td>' + srno + '</td>' +
'<td>' + values.CandidateName + '</td>' +
'<td>' + values.CandidateLifeCycleStatusName + '</td>' +
daydifference + '</tr>' + srno++;
$('#tblPendingHrResponse').append(tr);
}
您可以使用jQuery append。
success: function (data) {
$.each(data.data, function (index, value) {
$("table").html("Your HTML to updated");
});
},
讓您的控制器方法返回包含您的表或文章的部分。
[HttpPost]
public virtual ActionResult GetTable(ArticleViewModel viewModel)
{
// do stuff
return PartialView("_ArticleTable", viewModel);
}
然后在jQuery中更新表或文章:
您可以使用jQuery append。
success: function (data) {
$("table").html(data);
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.