使用jquery ajax响应重新加载选项卡

Reload the tab using jquery ajax response

本文关键字：加载 选项 新加载 jquery ajax 响应 使用      更新时间：2023-09-26

我使用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();
    });
}

1) Give Id to your body 

 <tbody id='table1tbody'>
 </tbody>
2) change append 
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内容。

$("#table1").epmty();

或

$("#table1 tr").remove();

或

$("#table1").html('');

在添加新行之前可能需要清空表。使用空虚()。还要将新行追加到主体，而不是表。

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).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();
    });
}

谢谢大家!

相关文章：