Question

我正在尝试绑定数据库中的数据。发生的事情是它每5秒绑定一次。现在它的绑定正常，但它不清楚早期的数据。它不停地起来。所以如果有3行..它只需要显示3行。现在发生的事情是它每5秒增加3行，并且每5秒钟持续6-9-12次。我需要清除数据，然后每5秒加载一次。

<script type="text/javascript">
        $(document).ready(function () {
            Get();
            setInterval(function () {
                Get() // this will run after every 5 seconds
            }, 5000);
        });

    function Get() {
        $.ajax({
            type: "POST",
            url: "../adminpage/noti.ashx",
            data: {},
            dataType: "json",
            success: function (response) {
                $.each(response, function (index, itemData) {
                    var tr = "<tr>" +
                                  "<td>" + itemData.msg + "</td>" +
                                  "<td>" + itemData.dt + "</td>" +
                                  "</tr>";

                    $("#testTable").find("tbody").append(tr);
                });

                BindTable();
            }
        });
    }
    function BindTable() {

        try {
            $('#testTable thead th').each(function (i) {
                var title = $('#testTable thead th').eq($(this).index()).text();

                if (title != "") {
                    $(this).html('<div style="width:40%;text-align:center;white-space:nowrap">' + title + '</div>');
                }
            });

        }
        catch (e) { }
    }
</script>


<table id="testTable" class="display" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th class="m-list-timeline__text" style="width:70%">msg</th>
                                                <th class="m-list-timeline__time" style="width:30%">dt</th>
                                            </tr>
                                        </thead>
                                          <tbody></tbody>
                                    </table>

Answer 1

在追加结果之前，请尝试清除tbody中的所有<tr>个节点：

success: function (response) {
    $("#testTable").find("tbody").empty(); //clear all the content from tbody here.
    $.each(response, function (index, itemData) {
         /*do stuff*/
         $("#testTable").find("tbody").append(tr);
    });
    BindTable();
}

Answer 2

$('#myTable').empty()

尝试在ajax调用之前删除表的内容然后填写数据

Answer 3

<script type="text/javascript">
      $(document).ready(function () {
          Get();
           setInterval(function () {
            Get() // this will run after every 5 seconds
            }, 5000);
       });

function Get() {
    $.ajax({
        type: "POST",
        url: "../adminpage/noti.ashx",
        data: {},
        dataType: "json",
        success: function (response) {

              // Check if response data is not empty 
            if (response) {
              // Empty previous data

                 $("#testTable").empty();
              // Iterate data for each row

                 $.each(response, function (index, itemData) {
                 var tr = "<tr>" +
                              "<td>" + itemData.msg + "</td>" +
                              "<td>" + itemData.dt + "</td>" +
                              "</tr>";

                $("#testTable").find("tbody").append(tr);
            });

            BindTable();
        }
       }
    });
}

在重新编码表中的数据之前清除表

3 个答案: