How to add merged cells via JS draw?

dwpoint

Hello. I'm using the following code:

let columns = [
    {'data': 'name', 'title': 'name', 'orderable': false},
    {'data': 'success', 'title': 'success', 'orderable': false},
    {'data': 'unsuccess', 'title': 'unsuccess', 'orderable': false},
    {'data': 'total', 'title': 'total', 'orderable': false}
];
let table = $("#report_table").DataTable({
    "responsive": true,
    "lengthChange": false,
    "pageLength": 1000,
    "searching": false,
    "autoWidth": false,
    "paging": false,
    "order": [],
    "language": dataTableLanguage,
    "columns": columns,
});
$('.dt-buttons.btn-group.flex-wrap').css('margin-left', '10px');
rows = [{
    'name': 'test',
    'success': 'test2',
    'unsuccess': 'test3',
    'total': '<input type="text" style="width: 50px;">',
}];
table.rows.add(rows).draw();

Everything works well. But tell me, is it possible to add merged cells in a row in the same way? If I want to add a row with the first and second columns concatenated, how can I do this?

How do I need to change the line:
{
'name': 'test',
'success': 'test2',
'unsuccess': 'test3',
'total': '<input type="text" style="width: 50px;">',
}

So that 'name' and 'success' are colspan = 2?

allan

No - colspan is not supported in the tbody in a DataTable, sorry.

If you make it a single cell (single column) you could use a renderer to merge data though.

Allan

dwpoint

@allan Is it possible to manually specify a span for the first two lines in HTML, and then add new ones through add draw() without adding them?

kthorngren

As Allan said colspan is not supported in the tbody. See the HTML Requirements doc for details. This example show how to use columns.render to merge the columns.

Kevin