How to continue custom dataTable after DataTable().row.add()?

Question

I've already initialized dataTable once when i do DataTable().row.add(), but i still need to do some extra methods with that datatable. For example, i need to do this api method: $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'colvis' ] } ); but there is an alert DataTables warning: table id=dataTable - Cannot reinitialise DataTable for every rows i have in my datatables, it means if i have 10 rows, this alert will show 10 times, althought after i skip all these alert, everything looks fine then, and there is no error in the console,too Here is my code:

following some comments below, i've UPDATED my code

            var myTable = $('#dataTable').DataTable({ dom: 'Bfrtip', buttons: ['colvis'] });
            var row = $('#dataTable tbody tr:first');
            myTable.row.add([
                '<img width="70px" height="100px" src="' + childData.poster + '">',
                '<p style="height:100px;overflow:auto;text-align:center">' + childData.title + '</p>',
                '<a style="text-align:center" href="javascript: void(0)" onclick="showModalListChapter(' + "'" + childKey + "'" + "," + "'" + childData.title + "'" + ')">' + totalChapters + '</a>',
                '<p style="height:100px;overflow:auto;text-align:center">' + childData.author + '</p>',
                '<p style="width:100px;height:100px;overflow:auto;text-align:center">' + childData.category + '</p>',
                '<p style="text-align:center">' + childData.state + '</p>',
                '<p style="width:350px;height:100px;overflow:auto;text-align:center">' + childData.description + '</p>',
                '<p style="text-align:center">' + childData.totalViews + '</p>',
                '<p style="text-align:center">' + childData.totalLikes + '</p>',
                '<button class="btn btn-danger" style="margin-bottom:20px" onclick="deleteManga(' + "'" + childKey + "'" + ')">xóa</button>' +
                '<button class="btn btn-warning" onclick="showModalUpdateManga(' + "'" + childKey + "'" + ')">sửa</button>',
                '<p style="text-align:center">' + childData.createdDate + '</p>',
                '<p style="text-align:center">' + childData.updatedDate + '</p>',
            ]).draw(false);

The same problem still happens

Answer 1

Most likely (hard to say for 100% because you haven't given us your code segment), you need to init the datatable to a variable, and then use the object in that variable to add your rows. So:

$(document).ready(function() {
    var myTable = $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'colvis' ] } ); 
    //and then, under some condition, and likely inside a function:
     myTable.row.add(data);
} );

The DataTables documentation on row.add() has further examples.

UPDATE

Here is a Fiddle demo that shows the basics for initializing a Datatable and then adding a row: https://jsfiddle.net/zephyr_hex/enkmhb2t/13/