행을 추가하는 데이터 테이블

Question

행을 빈 데이터 테이블에 동적으로 광고하려고합니다. 그러나 화면에 표시되는 텍스트 대신 각 열의 [object Object]로 돌아옵니다. 나는 여러 가지를 시도했지만, 무엇이 잘못되었는지 알아낼 수는 없다.

내 HTML은 기본 테이블

인이 당신을 위해 작동하는 경우 내 JS 아웃이

var commentTable = $('.commentTable').DataTable({ 
      columns: [ 
       { 
        class: "commentDate", 
        data: null 
        }, 
       { 
        class: "commentUser", 
        data: null 
        }, 
       { 
        class: "commentComment", 
        data: null 
        } 
       ], 
      bSort: false 
     }); 



$('.addComment').on('click', function() { 

    var newCom = $('.newCommentArea').find('input').val(); 
    var dateInput = moment().format("dd MM, YYYY"); 
    var rowNode = commentTable 
     .row.add({ 
      "date": dateInput, 
      "name": 'name', 
      "comment": newCom 
     }) 
     .draw(false) 
     .node(); 


    commentTable.page('last').draw(false); 


$(rowNode) 
    .css('background-color', 'lightyellow') 
    .animate({ 
     color: 'black' 
    }); 
$('.newCommentArea').find('input').val(''); 
}); 

Answer 1

확인과 같습니다

var commentTable = $('.commentTable').DataTable({ 
    aoColumns: [ 
     {"mData": "date", "className": "commentDate"}, 
     {"mData": "name", "className": "commentUser"}, 
     {"mData": "comment", "className": "commentComment"}, 
    ], 
    bSort: false 
}); 



$('.addComment').on('click', function() { 

    var newCom = $('.newCommentArea').find('input').val(); 
    var dateInput = moment().format("dd MM, YYYY"); 

    var dataSet = { 
     "date": dateInput, 
     "name": 'name', 
     "comment": newCom 
    } 

    commentTable.rows.add(dataSet).draw(); 

    ... 

});