angularjs ajax datatable,AngularJS - Jquery datatable empty

When integrating the DataTables plugin with AngularJS and using the DOM as the data source you need to wait for the DOM to have finished rendering before calling 'dataTable()'.

If you are retrieving the data to be rendered asynchronously you need to wait for that data to be available as well.

My guess is that in this case the 100ms delay you are using is enough for both of these to have finished.

To run something after the DOM has rendered you can usually wrap the call in a $timeout without specifying a delay. This will put the call at the end of the execution queue and when it's run Angular should have finished the $digest loop and everything should have been rendered:

app.directive('datatableSetup', ['$timeout',

function($timeout) {

return {

restrict: 'A',

link: function(scope, element, attrs) {

$timeout(function () {

element.dataTable();

});

}

}

}

]);

Now you need to make sure that that either:

The directive is not compiled until the data from the asynchronous call is available

The $timeout code in the directive's link is not run until the data from the asynchronous call is available

If you want to go the first route you can put a ng-if on the table element to delay the creation of the DOM portion (and the compilation of your directive) until the data is available. You can check that the users array contains data or simply set a variable to true when the data is finished loading:

Demo: http://plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv?p=preview

For the second route there are multiple options. You can for example use a watcher inside the link function that you unregister when used, use $broadcast/$emit or even a service or some custom notification system.