테이블의 데이터를 다시 저장하기 전에 테이블 지우기

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

시도는 다음 데이터를 입력 아약스 호출 전에 테이블의 내용을 제거

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