[英]Reload the tab using jquery ajax response
我正在使用jquery ajax调用servlet。 它在页面加载期间被调用,并使用ajax响应(来自servlet)填充div。
我要在单击按钮并重新加载div时再次使用此功能。 我在这里有一个问题。 除了重新加载div之外,所有值都将附加到表中的现有值之后。
如何通过替换以前的内容来重新加载该div?
我的代码(HTML):
<div>
<table id="table1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<!-- Adds the rows dynamically from Jquery AJAX response -->
</tbody>
</table>
</div>
JQuery的:
function loadMyTable() {
$.get('CallServlet', {}, function (responseText) {
var response = $.parseJSON(responseText);
$.each(response, function (key, value) {
var row = $("<tr/>")
$('#table1').append(row);
row.append($("<td>" + value.val1 + "</td>"));
row.append($("<td>" + value.val2 + "</td>"));
row.append($("<td>" + value.val3 + "</td>"));
});
$('#table1').dataTable();
});
}
您可能需要先清空表,然后再添加行。 使用.empty()。 还将新行附加到tbody,而不是表。
function loadMyTable(){
$.get('CallServlet', {
}, function (responseText) {
var response = $.parseJSON(responseText);
$('#table1 tbody').empty();
$.each(response, function (key, value) {
var row = $("<tr/>")
$('#table1 tbody').append(row);
row.append($("<td>" + value.val1 + "</td>"));
row.append($("<td>" + value.val2 + "</td>"));
row.append($("<td>" + value.val3 + "</td>"));
});
$('#table1').dataTable();
});
}
您需要先清除table1内容,然后再向其中添加新内容。
$("#table1").epmty();
要么
$("#table1 tr").remove();
要么
$("#table1").html('');
1)将ID交给您的Tbody
<tbody id='table1tbody'>
</tbody>
2)更改附加
function loadMyTable() {
$.get('CallServlet', {}, function (responseText) {
var response = $.parseJSON(responseText);
$("#table1tbody").html("");
$.each(response, function (key, value) {
var row="<tr>";
row+="<td>" + value.val1 + "</td>";
row+="<td>" + value.val2 + "</td>";
row+="<td>" + value.val3 + "</td>";
row+="</tr>";
$("#table1tbody").append(row);
});
$('#table1').dataTable();
});
}
我用了
$('#table1).datatable().fnDestroy();
这解决了我在重新加载表时遇到的问题。 更新了下面的代码
function loadMyTable() {
$.get('CallServlet', {}, function (responseText) {
$('#table1).datatable().fnDestroy();
var response = $.parseJSON(responseText);
$.each(response, function (key, value) {
var row = $("<tr/>")
$('#table1').append(row);
row.append($("<td>" + value.val1 + "</td>"));
row.append($("<td>" + value.val2 + "</td>"));
row.append($("<td>" + value.val3 + "</td>"));
});
$('#table1').dataTable();
});
}
感谢大家!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.