update dataTables after adding raw html for a row

Question

I'm adding a row to my table by passing raw html since I need some [data-] values in a couple of cells.

and I want that DataTables updates after this insertion, but I can't find how to do that.

I'm globally activating any table that has the class

$('.dataTable').DataTable(options);

then at some point I will add some row to a specific table:

let dataRow = '<tr data-bmid="' + j.id + '">';
dataRow = dataRow + '<td class="bmtitle">' + j.title + '</td>';
dataRow = dataRow + '<td data-color="'+j.colorCode+'">"+j.colorName + "</td>";
dataRow = dataRow + '</tr>';
$('#myTable tbody').append(dataRow);

I've tried:

$('#myTable').dataTable().draw();


$('#myTable').dataTable().update();


let dt = oTable.dataTable().api();
dt.row.add(dataRow);
dt.draw();

Hope you can help me find a solution to this

Thanks in advance!

Answer 1

I have solved it.

the code is:

let dt = oTable.dataTable().api();
dt.row.add($(dataRow));
dt.draw();

I had been pretty close, all I was missing was enclose the html I had created in a jquery call: dataRow to $(dataRow)

Thanks to everybody