아약스 호출 후 데이터 테이블을 다시 그려야합니다.

Question

필터가있는 데이터 테이블이 있습니다. 필자는 Ajax를 10 초마다 사용하여 새로운 데이터를 가져오고 테이블에 새 행을 추가합니다. 당신은 내가 업데이트하거나 I 필터링하거나 검색 할 수 있도록 새 데이터로 테이블을 그릴려고시피

$(function() { 
    setInterval(checkNew,1000*10); 

    $("#orderdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '2013:2050', 
     dateFormat:"dd-mm-yy", 
     showAnim:"fold" 
    }); 

    var table = $('#data').DataTable({ 
     "lengthMenu": [[-1], ["All"]], 
     "bSort": false, 
     "paging": false, 
    }); 

    $("#status").change(function() { table.column(4).search($(this).val()).draw() }); 

}); 

function checkNew(){ 
    $.post('getdata.php',{max: $("#lastid").text().trim() }).done(function (data) { 
     if(data.trim() !== '') { 
      $("table#data").prepend(data.trim()); 
      //need to draw datatable to filter and search new data added to the table 
     } 
    }); 
} 

(테이블 데이터가 없습니다 아약스가 같은 페이지에 동적). 새 데이터를 검색하면 DOM으로로드되지 않았기 때문에 표시되지 않습니다. 하지만 어쨌든 제대로에 내가 어떻게에서 코드를 편집

$("table#data").DataTable().draw(); // new rows are added but can't be searched or filtered 

그리고

$('table#data').dataTable().fnDraw(); //new rows are not added 

을 시도했습니다 테이블을 다시 그리기 필터링하고 새로운 추가 데이터를 검색 할 수있는 테이블을 그릴 수 없습니다?

Answer 1

데이터 테이블은 built-in functionality for handling loading data from an ajax request을 테이블에 제공합니다. 또한 reload 메서드를 제공하여 테이블의 데이터를 새로 고칩니다. 다음

var table = $('#data').DataTable({ 
    ajax: "getdata.php" 
}); 

과 :

귀하의 경우

, 당신은 같은 것을 할 수 있어야

setInterval(function() { 
    table.ajax.reload(); 
}, 10000); 

당신이 다시로드 함수에 인수로 전달할 수있는 추가 옵션이 있습니다 유스 케이스에 따라 다르다. 이게 도움이 되길 바란다! getdata.php에