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