Angular DataTable not populating DTInstance

Question

I am not getting my DtInstance populated after rendering. Anyone faced this issue.

<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

I was able to fix it by this https://github.com/l-lin/angular-datatables/issues/365

The problem was due to I initialized the dataHolder like this

vm.dtInstance = {};

It fixed when I changed it into vm.dtInstance = null; even vm.dtInstance = undefined wont work.

Answer 2

For me even vm.dtInstance = null; did not work. I ended up going throught the source of the directive and found that dt-instance can also be a setter function. That solved the problem for me.

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

Answer 3

Just adding my 2 cents here.

For me the problem was solved by @rosshays solution in the thread: https://github.com/l-lin/angular-datatables/issues/345

Update Dec. 4 2017: As per @trainoasis suggestion, i am copying the solution to here.

In your controller

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

And in your 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 4

I am using

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

and I was having the same issue, but it was resolved with the following code:

Controller

$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

Another way to trigger this is to iterate over a sequence of tables, using <... ng-repeat="table in tables"> <table datatables="ng" dt-instance="dtInstance" ... >. When there is more than one table, it is not surprising that this way, dtInstance may not refer to the table that you expected it to.

However, when you know that there is always exactly one table in the set, you might expect dtInstance to refer to that one instance. But it does not. The solution in my case was to get rid of the extra layer and simply use the one table.