Add child row with ColVis

mschmidt

Hello,

I am using the ColVis button to show/hide columns. As well I need to add child rows to certain rows.

My problem:
When adding the child rows, the hidden columns appear in the DOM.

My problem in detail
So my table has 10 columns; 1 of the 10 columns is default hidden. Whenn adding the child rows I add rows with 10 columns, but Datatables doesnt hide the default-hidden column.

Here my code to initialize:
tbl1 = $("#tbl1").DataTable({
responsive: true,
autoWidth: false,
paging: false,
searching: false,
info: false,
order: [],
dom: "B",
columnDefs: [{
targets: [ 4 ], visible: false
}],
buttons: [{
text: "Columns",
extend: "colvis",
autoClose: false,
columns: ":not(.noColVis)",
colVis: {showAll: "Show all"}
}],
colReorder: {
fixedColumnsLeft: 1,
fixedColumnsRight: 1
}
});

Here my code to add the rows:
var tr = $("#rowRoute_123");
var row = tbl1.row( tr );

if ( row.child.isShown() ) {
row.child.hide();
}
else {
row.child( $("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>").toArray() ).show();
}
tbl1.columns.adjust().draw( false );

Thanks in advance for your help!

Best,
Michael

kthorngren

Whenn adding the child rows I add rows with 10 columns, but Datatables doesnt hide the default-hidden column.

Datatables doesn't know anything about the HTML you are using to show the child detail rows so it won't auto hide anything. You can use columns().visible() to get the visibility status of the columns then use that to determine which columns you want to display using row.child( ... ).show();.

Kevin