データテーブル行を追加する

Question

空のデータテーブルに行を動的に広告しようとしています。ただし、画面に表示されるテキストの代わりに、各列の[オブジェクトオブジェクト]として戻ってきます。私は複数のことを試しましたが、何が間違っているのか分かりません。これはあなたのために働く場合

私の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(); 

    ... 

});