我的表正文在AJAX GET请求后没有显示正确的数据。好吧,实际上,在我的for循环的第二次迭代之后,它可以正确显示,但是在第三次迭代之后,依此类推,它会追加但显示前一项。
这是显示的内容:
我不知道为什么控制台日志中的表显示不正确,数据显示正确。
$.ajax({
cache: false,
type: 'GET',
url: '@Url.Action("DisplayFiles","FileUploader")', //url, // '/Account/Delete/',
dataType: "json",
success: function(response) {
$("#tblFiles tbody").remove();
for (var i = 0; i < response.length; i++) {
console.log(response[i]['Filename']);
console.log(response[i]['FileFullPath']);
$("#tblFiles").append('<tr><td>' + response[i]['Filename'] + '</td><td>' + response[i]['FileFullPath'] + '</td></tr>');
//var tbodyFiles = "<tr><td> " + response[i]['Filename'] + "</td>" + "<td> " + response[i]['FileFullPath'] + "</td></tr>";
}
//$("#tblFiles").append(tbodyFiles);
console.log(response);
},
error: function(resp) {
console.log('error');
}
});
<table class="table table-striped" id="tblFiles">
<thead>
<tr>
<th>Filename</th>
<th>File Fullpath</th>
@*
<th>Date Added</th>*@
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Filename)
</td>
<td>
@Html.DisplayFor(modelItem => item.FileFullPath)
</td>
@*
<td>
@Html.DisplayFor(modelItem => item.DateAdded)
</td>
*@
<td>
@Html.ActionLink(" ", "Delete", new { id = item.Id }, new { @class = "btn-xs btn btn-danger glyphicon glyphicon-trash" })
</td>
</tr>
}
</tbody>
</table>
答案 0 :(得分:1)
更改此:
$("#tblFiles tbody").remove();
对此:
$("#tblFiles tbody tr").remove();
然后更改它:
$("#tblFiles").append(...)
对此:
$('#tblFiles tbody").append(...)
说明:
您要删除整个tbody
元素,而是将tr
附加到table
而不是tbody
上。
建议的更改将确保tbody
保持存在,并将tr
作为子项添加到其中,而不是在其外部。