Question

I have a datable inside a tab. My application has a left pane and a center pane. Center pane displays the data table and left pane is used for browsing. My left pane is collapsible, but whenever I collapse my left pane the column width in datatables is not automatically re sized based on new width but when I click on any of the column headers it expands / collapse based on the new width. I am not sure how to fix this issue.

I tried using the below code, the table gets expanded properly but the columns are not getting expanded / collapsed unless I click the column headings.

    function collapse () {
   $("#"+elementId).css('width', '100%');
  $("#"+elementId).datatable().fnAdjustColumnSizing();
} );

Answer 1

I figured out that we can use $.fn.dataTable.fnTables(true) to get all the table instances and then adjust the column size of each table.

something like below,

function onCollapse(e) {
    var table = $.fn.dataTable.fnTables(true);
    if ( table.length > 0 ) {

            for(var i=0;i<table.length;i++){
                $(table[i]).dataTable().fnAdjustColumnSizing();
            }

    }
}

Thanks
Barani