CODEWITHSUNDEEP
jquerydatatables
zazvorniki
zazvorniki

Reputation: 3602

Datatables adding rows

I'm trying to dynamically ad rows to a blank datatable. However, it instead of the text displaying on the screen it's coming back as [object Object] in each column. I've tried multiple things, but can't figure out what's wrong with it.

my html is just a basic table

and my js looks like this

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('');
 });

Upvotes: 1

Views: 114

Answers (1)

Eliellel
Eliellel

Reputation: 1446

Check out if this works for you:

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

    ...

});

Upvotes: 1

Related Questions