[英]How do i refresh or redraw table rows
以下是我在應用開發過程中遇到的經典問題。 我的spring控制器中有一個JSONObjects數組,我必須在jsp中迭代; 還設置了另一個名為JSONArrayStatus的狀態屬性,該屬性建議JSON數組是否為空。
如果JSONArray為空,則使用jquery我將顯示noDataImageDiv,否則將顯示tableDIV(使用JSTL綁定來自JSONArray的數據)
我面臨的問題如下。 1.編輯表格中的一行,然后單擊“更新”。 這時我做了一個Ajax Call,說“UpdatedUser”,它將返回所有記錄以及更新的記錄。 我可以使用刷新,但這不是推薦的用戶體驗,因此不是沒有。
重繪代碼
function reDrawExternalContactUsers(externalUsers) {
table.clear().draw();
var row = "";
$.each(externalUsers, function (i, field) {
row = '<tr><td></td><td></td><td class="edit">edit</td></tr>';
$("#tableDIV").append(row);
});
}
afetr這個重繪或刷新過程
此功能無效
$(".edit").click(function(){
});
這個功能正常
$("#tableDIV .edit").click(function(){
});
建議更好的刷新表行的方法(如果有的話)。
<div id="tableDIV">
<table id="tableID">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
if data exist
loop{
<tr>
<td></td>
<td></td>
<td class="edit">edit</td>
</tr>
} // loops ends
if close
</tbody>
</table>
</div>
<div id="noDataImageDiv"> No data image</div>
HTML代碼:
<div id="tableDIV">
<table id="tableID">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
if data exist
loop{
<tr>
<td class="user-name"></td>
<td></td>
<td class="edit" data-user-id="">edit</td> //set user_id in attr data-user-id
</tr>
} // loops ends
if close
</tbody>
</table>
</div>
<div id="noDataImageDiv"> No data image</div>
jquery代碼:
你應該在文檔上使用click事件
$(document).on('click', '.edit', function () {
var btn = $(this);
var user_id = btn.attr("data-user-id"); //user_id of user will update
// extra user data
$.ajax({
method: "POST",
url: url,
data: {
'id': id,
// extra data to send
},
success: function (data) {
if (data.status) // successfully user updated
{
var user = data.user;
/* you can set user data like this */
btn.closest('tr').find('.user-name').html(user.name);
}
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.