I have 2 tables, one displayed, the other one hidden:
<div ng-show="displayed('active')" ng-controller="DataTablesCtrlA as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
<div ng-show="displayed('retired')" ng-controller="DataTablesCtrlB as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
I have a toggle which controls the visibility of the tables, when button A is clicked, then table A is displayed and table B get hidden and vice-versa.
The issue I am facing is that when table B get displayed, the table header is not properly expanded. This is known and well explained on DataTables documention here.
Below a screenshot of the issue:
So I am using columns.adjust() like so:
In the View template:
<div class="btn-group">
<button ng-click="setDisplayed('active')"
ng-class="{active: displayed('active')}" class="btn btn-default">Active</button>
<button id="btn-retired" ng-click="setDisplayed('retired')"
ng-class="{active: displayed('retired')}" class="btn btn-default">Retired</button>
</div>
In the View controller:
//...
this.setDisplayed = function(toDisplay){
this.displayed = toDisplay;
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
};
//...
The issue I am facing is that table B is still hidden when setDisplayed get called and the header stay "unexpanded".
Is there a clean way to solve this problem ?
One solution I have in mind would be to listen for changes on the table display style attribute and call colums.adjust() in the event handler. But this would require to change the directive link property.
