テーブル内のデータを再配置する前にテーブルをクリアする

Question

データベースからデータをバインドしようとしています。起こっていることは、5秒ごとにバインドすることです。今はバインドが正しく行われていますが、以前のデータはクリアされません。それはうんざりし続ける。したがって、3つの行がある場合は、3つの行だけを表示する必要があります。今起こっていることは、5秒ごとに3行を追加し、5秒ごとに6-9-12をpillingし続けることです。 データをクリアしてから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

を埋めるAJAX呼び出し の前にテーブルの内容を削除しよう：

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() 

、あなたはあなたの結果を追加する前に、あなたのtbodyからすべての<tr>のノードをクリアしてみたデータに

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