I have a Data table with fixed columns. It is initialized in below way:
$('#someTable').DataTable({
"dom" :'<flitp>',
"columnDefs": [{"targets":[9,10], "searchable":false, "visible":false}],
"pageLength": 10,
"lengthMenu": [[100,150,250,500,-1], [100,150,250,500,"All"]],
"fnInitComplete": function (oSettings, json) {
/*let table = this.api();
new $.fn.dataTable.FixedColumns( table, {
leftColumns:3,
rightColumns:1,
} );*/
},
"fixedColumns": {
"leftColumns":3,
"rightColumns":1
}
});
On initialization, Datatable adds attributes like 'left' and 'sticky' to these cells. Problem comes when I try to reinitialize the table.
dwr.util.removeAllRows("tableBody");
if ( $.fn.DataTable.isDataTable( '#someTable' ) ) {
$('#someTable').DataTable().clear().draw();
$('#someTable').DataTable().destroy();
}
I destroy table before making the table again. But after reinitialization, only headers remain fixed and not the body columns. For the cells in body position is set sticky but 'left' property is set to '0px' for all fixed columns. Any help appreciated. Edit - The above issue gets resolved when I sort the table or search something in the table - the table structure gets fine on its own. Not sure what's causing the issue.
Update - I figured out this issue is coming because I have kept last 2 columns as hidden. If I keep those columns visible I do not face this issue. Though I still need a solution for this!
As mentioned in my 'Update', this issue was because of hiding 2 columns and also fixing first few columns. My problem was solved by not defining the hidden column property in options, but hiding those columns later- after the table is initialized.
table.columns([9,10]).visible(false,true);