0

我有两张桌子，一张显示，另一张隐藏：

<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>

我有一个控制表可见性的开关，当单击按钮 A 时，会显示表 A，而表 B 会被隐藏，反之亦然。

我面临的问题是，当表 B 显示时，表头没有正确展开。这是已知的，并且在此处的 DataTables 文档中得到了很好的解释。

下面是问题的截图： 标题崩溃问题

所以我这样使用columns.adjust() ：

在视图模板中：

<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>

在视图控制器中：

//...
this.setDisplayed = function(toDisplay){
    this.displayed = toDisplay;
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
  };
//...

我面临的问题是表 B 在setDisplayed被调用时仍然隐藏，并且标题保持“未扩展”。

有没有一种干净的方法来解决这个问题？

我想到的一种解决方案是侦听表格display样式属性的更改并调用colums.adjust()事件处理程序。但这需要更改指令链接属性。

4

0 回答 0