JQuery загружает данные HTML в реальном времени

Question

Я вызываю метод getContent рекурсивно и строгая значения в реальном времени в HTML-таблице. Но после рекурсивного вызова ajax новые результаты присоединяются к существующей таблице, а не обновляют таблицу. как я могу очищать данные таблицы каждый раз, прежде чем я заново заполню таблицу?

HTML:

 <table id="personDataTable" class="table table-bordered"> 
     <tbody> 
      <tr> 
       <th>workflow_job_id</th> 
       <th>Domain Id</th> 
       <th>Entity Id</th> 
       <th>Type</th> 
       <th>Status</th> 
       <th>Task Status</th> 

      </tr> 
     </tbody> 
     </table> 

Сценарий:

function getContent(){ 
//ajax call to retrieve the data from DB. 
drawTable(dat); 
} 

function drawTable(data) { 

     setTimeout(getContent, 60000); 
     for (var i = 0; i < data.resultSet.length; i++) { 
      drawRow(data.resultSet[i]); 
     } 
    } 

    function drawRow(rowData) { 
     var row = $("<tr />") 

     $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it 
     row.append($("<td>" + rowData.workflow_job_id + "</td>")); 
     row.append($("<td>" + rowData.domain_id + "</td>")); 
     row.append($("<td>" + rowData.entity_id + "</td>")); 
     row.append($("<td>" + rowData.type + "</td>")); 
     row.append($("<td>" + rowData.status + "</td>")); 
     row.append($("<td>" + rowData.taskstatus + "</td>")); 
    } 

Answer 1

Почему вы не удалить строку перед добавлением, например:

function getContent(){ 
//ajax call to retrieve the data from DB. 
drawTable(dat); 
} 

function drawTable(data) { 

    setTimeout(getContent, 60000); 
    $("#personDataTable").find("tr:gt(0)").remove(); 
    for (var i = 0; i < data.resultSet.length; i++) { 
     drawRow(data.resultSet[i]); 
    } 
} 

function drawRow(rowData) { 
    var row = $("<tr />") 

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it 
    row.append($("<td>" + rowData.workflow_job_id + "</td>")); 
    row.append($("<td>" + rowData.domain_id + "</td>")); 
    row.append($("<td>" + rowData.entity_id + "</td>")); 
    row.append($("<td>" + rowData.type + "</td>")); 
    row.append($("<td>" + rowData.status + "</td>")); 
    row.append($("<td>" + rowData.taskstatus + "</td>")); 
} 

Answer 2

попробуйте изменить

function drawRow(rowData) { 
    var row = $("<tr />") 

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it 
    row.append($("<td>" + rowData.workflow_job_id + "</td>")); 
    row.append($("<td>" + rowData.domain_id + "</td>")); 
    row.append($("<td>" + rowData.entity_id + "</td>")); 
    row.append($("<td>" + rowData.type + "</td>")); 
    row.append($("<td>" + rowData.status + "</td>")); 
    row.append($("<td>" + rowData.taskstatus + "</td>")); 
} 

в

function drawRow(rowData) { 
    var row = $("<tr />") 

    $("#personDataTable").find('tr').remove(); 
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it 
    row.append($("<td>" + rowData.workflow_job_id + "</td>")); 
    row.append($("<td>" + rowData.domain_id + "</td>")); 
    row.append($("<td>" + rowData.entity_id + "</td>")); 
    row.append($("<td>" + rowData.type + "</td>")); 
    row.append($("<td>" + rowData.status + "</td>")); 
    row.append($("<td>" + rowData.taskstatus + "</td>")); 
} 

, чтобы удалить старые строки перед добавлением