Responsive Datatables expand icon overlying data in first column

Jmpmd

I have been trying to get the green expand icon in a responsive table to appear in its own column. The code I have been using (found in other answers here) works fine if the table HTML exists. However, my table is being popluated with jquery or Ajax, and the column definitions are being created on the fly.

Is there a way I can add the expand icon to its own column when using data fetching as described?

This is the code I am using:
** $('#example').DataTable( {
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'dtr-control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );**

(I also tried adding the button to the right-most column: it appears but then does not work when clicked.)

kthorngren

the column definitions are being created on the fly.

Not sure how you are doing this but you will need to add an additional column as the first column to account for placing the responsive control in that column.

Kevin

rf1234

I guess you would need to make sure that

The code I have been using (found in other answers here) works fine if the table HTML exists

is being executed when the data table really exists (and that would include its HTML of course).

You can achieve that using an option or an event - and place your code there:
https://datatables.net/reference/option/initComplete
https://datatables.net/reference/event/init

Something like this could work:

table
    .on ('init', function ( e, settings, json ) {   
        table.columns('yourSelector').nodes().to$().addClass('dtr-control');
    });  

rf1234

more links:
https://datatables.net/reference/api/columns().nodes()
https://datatables.net/reference/api/column().nodes()