angularjs - Angular DataTable 未填充 DTInstance

Question

渲染后我没有填充我的 DtInstance。任何人都遇到过这个问题。

<div ng-controller="InventoryTableController as vm">
          <table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
                 dt-instance="vm.dtInstance"
                 class="display table table-bordered table-striped table-hover"></table>
      </div>

Answer 1

我可以通过这个https://github.com/l-lin/angular-datatables/issues/365修复它

问题是由于我像这样初始化了dataHolder

vm.dtInstance = {};

当我将其更改为vm.dtInstance = null; 甚至vm.dtInstance = undefined无法正常工作时，它已修复。

Answer 2

只需在这里加上我的 2 美分。

对我来说，问题已通过线程中的@rosshays 解决方案解决：https ://github.com/l-lin/angular-datatables/issues/345

2017 年 12 月 4 日更新： 根据@trainoasis 的建议，我将解决方案复制到此处。

在您的控制器中

$scope.nested = {};
$scope.nested.dtInstance = {}

在你的 HTML 中

<table
    datatable=""
    class="table table-striped table-hover table-bordered table-condensed"
    dt-options="dtOptions"
    dt-columns=dtColumns
    dt-instance="nested.dtInstance">
</table>

Answer 3

对我来说，甚至 vm.dtInstance = null; 不工作。我最终浏览了指令的来源，发现 dt-instance 也可以是一个 setter 函数。这为我解决了问题。

vm.setDTInstance = function(dtInst){
    vm.myTable = dtInst;
};

Answer 4

我在用

.withOption('serverSide', true).withFnServerData(getDataFromServer)

我也遇到了同样的问题，但是用下面的代码解决了：

控制器

$scope.dtInstance = {};
$scope.dtIntanceCallback = function (instance) {
    $scope.dtInstance = instance;
}
$scope.dtRebind = function () {
    $scope.dtInstance.DataTable.draw()
}

HTML

<table datatable dt-instance="dtInstanceCallback"></table>
<button ng-click="dtRebind">Rebind</button>

Answer 5

另一种触发方式是迭代一系列表，使用<... ng-repeat="table in tables"> <table datatables="ng" dt-instance="dtInstance" ... >. 当有多个表时，这种方式dtInstance可能不会引用您期望的表，这并不奇怪。

但是，当您知道集合中始终只有一个表时，您可能希望dtInstance引用该实例。但事实并非如此。在我的情况下，解决方案是去掉额外的层，只使用一张桌子。