在ajax调用中单击按钮后如何刷新表格？答案

【问题标题】：How to refresh table after button click in ajax call?在ajax调用中单击按钮后如何刷新表格？
【发布时间】：2021-02-24 18:48:20
【问题描述】：

我在 ajax 调用成功后生成了一个表。当我重新选择选项并单击仅添加到现有表的按钮数据时。这里我想用更新的表刷新表。无法设置刷新功能。如有任何帮助，请提前致谢。

function viewAttendanceSheet() {
    var date = $("#datepicker").val();
    $.ajax({
        type: 'GET',
        url: "attendanceList",
        dataType: "json",
        data: {
            "date": date
        },
        success: function(data, status) {
            alert(status);
            alert(JSON.stringify(data.length));
            var res = String(JSON.stringify(data)).split(",");
            if (data.length == 0) {
                newRowContent = ("<tr>NOTHING TO DISPALY...</tr>");
                $("#ajaxViewAttendanceSheet").append(newRowContent);
            } else {
                $("#attendanceViewTableHead").css("display", "block");
                $.each(data, function(key, value) {
                    if (value.status == "Absent") {
                        newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:red;>" + value.status + "**</td></tr>");
                    } else {
                        newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:green;>" + value.status + "</td></tr>");
                    }
                    $("#ajaxViewAttendanceSheet").append(newRowContent);
                });
            }
        }
    });
}

【问题讨论】：

我建议您在添加任何新数据之前先清空表格，方法是在您的 alert(JSON.stringify(data.length)); 语句之后调用 $("#ajaxViewAttendanceSheet").empty();。
这就是你要找的stackoverflow.com/questions/12588260/…

标签： javascript jquery ajax

【解决方案1】：

试试这个：

function viewAttendanceSheet() {
        var date = $("#datepicker").val();
        $.ajax({
            type: 'GET',
            url: "attendanceList",
            dataType: "json",
            data: {
                "date": date
            },
            success: function(data, status) {
                $("#ajaxViewAttendanceSheet").html('');
                var res = String(JSON.stringify(data)).split(",");
                if (data.length == 0) {
                    newRowContent = ("<tr>NOTHING TO DISPALY...</tr>");
                    $("#ajaxViewAttendanceSheet").append(newRowContent);
                } else {
                    $("#attendanceViewTableHead").css("display", "block");
                    $.each(data, function(key, value) {
                        if (value.status == "Absent") {
                            newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:red;>" + value.status + "**</td></tr>");
                        } else {
                            newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:green;>" + value.status + "</td></tr>");
                        }
                        $("#ajaxViewAttendanceSheet").append(newRowContent);
                    });
                }
            }
        });
    }

您应该在每次成功加载 ajax 时重置表格的 html：$("#ajaxViewAttendanceSheet").html('');

【讨论】：

为什么这个答案的票数下降。使用这个解决方案有什么缺点
我想也许其他人认为我只是在上面复制并粘贴您的代码。但实际上我在代码中做了一个修复。下次我最好解释一下我的修复方法:)
yah.yopu 在我的代码中添加了解决方案。再次感谢您。

【解决方案2】：

一个简单问题的复杂答案。

在var res = String(JSON.stringify(data)).split(",");这一行之后调用此方法，清除这些元素中的元素和值。

  $("#ajaxViewAttendanceSheet").empty();

使用JQuery方法empty()

https://api.jquery.com/empty/

【讨论】：