Datatables에 tr 태그의 행을 추가하는 방법

Question

데이터 테이블 documentation에 따르면 "각 데이터 요소는 배열, 객체, Javascript 객체 인스턴스 또는 tr 요소 일 수 있습니다."

HTML

<table id="dt"> 
    <thead> 
    <tr> 
     <th>column 1</th><th>column 2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr><td>row 0 col 1;</td><td>row 0 col 2;</td></tr> 
    </tbody> 
</table> 
<button id="mybutton" type='submit'>Add rows</button> 

JS

var data = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"]; 

var datatable = $('#dt').DataTable(); 

$("body").on('click', '#mybutton', function(evt){ 
    console.log ("button clicked"); 
    datatable.rows.add(data); 
    datatable.draw(); 
    evt.preventDefault(); 
}) 

을 : 나는 문자열 배열을 반환하고 rows.add 방법을 사용하는 아약스를 사용하는 경우는 셀의 값으로 모든 문자를 해석하는 것

출력 예

이것을 보여주는 간단한 fiddle을 만들었습니다. 내가 뭘 잘못하고 있니?

Answer 1

이 코드는 HTML을 직접 변경하기 때문에 데이터 테이블에 데이터 테이블이 표시되도록 데이터 테이블을 삭제하고 다시 작성해야합니다. 이 코드는 그렇게합니다.

 $(document).ready(function() { 
      var md = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"]; 

      var datatable = $('#dt').DataTable(); 


      $('#mybutton').on('click', function (evt) { 
       datatable.destroy(); 
       $.each(md, function (i, item) { 

        $('#dt tbody').append(item) 
       }); 
       datatable = $('#dt').DataTable(); 

      }) 

     }); 

Answer 2

정상적으로 위에서 언급 한 것처럼 데이터에 html을 추가하지 않습니다. 그냥 데이터를 전달하십시오. 그러나 이런 식으로해야 할 실질적인 이유가 있다면 여기에서 작동하는 한 가지 방법이 있습니다.

var data = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"]; 

var datatable = $('#dt').DataTable(); 

$('#mybutton').on('click', function(evt){ 
    $.each(data, function(i, item){$('#dt tbody').append(item)}); 
    datatable.rows.invalidate().draw() 
}) 

Answer 3

이것은 실제로 어떻게 처리 할 것인가입니다.

var data = [["row 1 col 1","row 1 col 2;"],[ "row 2 col 1;", "row 2 col 2;"]]; 

var datatable = $('#dt').DataTable(); 

$('#mybutton').on('click', function(evt){ 
    datatable.rows.add(data).draw() 
})