Add the possibility to provide an object or a callback function to fetch the DT instance

[l-lin]

Instead of using DTInstances service (which caused more headaches than expected 😞 ), one solution is to create another directive dt-instance in which it will be possible to provide a variable that angular-datatables will populate with the DT directive instance.
One example:

<div ng-controller="ShowCaseCtrl as showCase">
    <table datatable
           dt-options="showCase.dtOptions"
           dt-instance="showCase.dtInstance">
    </table>
</div>

angular.controller('ShowCaseCtrl ', ShowCaseCtrl );
function ShowCaseCtrl(DTOptionsBuilder) {
    var vm = this;
    vm.dtInstance = {}; // This will be set automatically with the two-way data binding
    vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
}

The user should also have the possibility to set a callback function instead of a variable:

<div ng-controller="ShowCaseCtrl as showCase">
    <table datatable
           dt-options="showCase.dtOptions" 
           dt-instance="showCase.dtInstanceCallback">
    </table>
</div>

angular.controller('ShowCaseCtrl ', ShowCaseCtrl );
function ShowCaseCtrl(DTOptionsBuilder) {
    var vm = this;
    vm.dtInstances = [];
    vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
    vm.dtInstanceCallback = dtInstanceCallback;

    function dtInstanceCallback(dtInstance) {
        vm.dtInstances.push(dtInstance);
    }
}

Note: This enhancement will completely replace the DTInstances service. So expect the removal of the DTInstances service in the v0.5.0+ versions!!!

[MowWow]

Sorry as i'm not familiar with github, where can i find the new code version containing this bug fix ?

Big thanks!

[MowWow]

Forget my comment i found the new code thx

[terry-herckenrath]

I found this thread when I ran into this issue trying to include multiple DataTables on one page.

I followed your advice regarding adding the dt-instance attribute to my table, but it did not fix the problem for me.

After some digging through the code I found out why it wasn't working for me: I'm using the Ajax Renderer rather than the Angular Renderer and your fix was only applied to the Angular Renderer.

I replicated the changes in the Ajax Renderer and it now works fine for me.

Original code (line 1162 in angular-datatables.js v0.4.3):

        function rerender() {
            _oTable.destroy();
            DTRendererService.showLoading(_$elem);
            render(_$elem);
        }

Modified code:

        function rerender() {
            _oTable.ngDestroy();
            DTRendererService.showLoading(_$elem);
            $timeout(function() {
                var result = DTRendererService.hideLoadingAndRenderDataTable(_$elem, renderer.options);
                _oTable = result.DataTable;
                dtInstance = DTInstances.register(dtInstance, result);
            }, 0, false);
        }

[l-lin]

It should work even with the Ajax renderer. See this example.

[1antares1]

Thankfully l-lin!... Sincerely.

[iscluise]

• Error add datatable, is error message

angular.js:13920 TypeError: $elem.hide is not a function
at Object.showLoading (http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:1318:15)
at ControllerDirective.showLoading (http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:496:31)
at Object.postLink (http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:482:18)
at http://localhost:3000/bower_components/angular/angular.js:1247:18
at http://localhost:3000/bower_components/angular/angular.js:9928:44
at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9934:9)
at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9335:11)
at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8620:13)
at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8623:13)
at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8623:13)

[Rocky-L]

I followed lin's code and trying to use

vm.dtInstace.reloadData()

I've got this warning and the data is not reloaded.

The Angular Renderer does not support reloading data. You need to do it directly on your model