Datatables adding rows

Question

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

@shukshin.ivan I'm not having issues with the class. If I switch it to className then it stops working. — zazvorniki
– zazvorniki, Commented Dec 8, 2017 at 18:45

Eliellel · Accepted Answer · 2017-12-08 19:01:10Z

1

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

    ...

});

answered Dec 8, 2017 at 19:01

Eliellel

1,4561 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zazvorniki Over a year ago

Thank you! Worked perfectly! Except I had to chance className to class for the class to attach to the td.

Eliellel Over a year ago

You're welcome, glad it helps. Not sure why tho but when I tested it both the keyword "class" and "className" are working.

Collectives™ on Stack Overflow

Datatables adding rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related