current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm trying to display a datatable using angular and jquery datatable but so far the datatable stays empty after applying the datatable function.

I've read that the best way is to use a directive but I can't get it working. This only I've manage to get it working is by applying a timeout with 100 ms (time out less than 100 didn't work)

What I'd like to do is to apply the datatable function after the DOM is rendered. I'm sure someone has managed to do that ;)

userController.js

myApp.controller('UserController', ['$scope', 'User',
    function ($scope, User) {

        User.query(function(data) {
            $scope.users = data;
        }, function(errorData) {
        });

    }]);

datatableSetup.js

myApp.directive('datatableSetup', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs) {
                $timeout(function() {
                    elm.dataTable();
                }, 100);
            }
        }
    }]);

user.html

<table datatable-setup="" class="table table-bordered table-striped">
<thead>
<tr>
    <th>Username</th>
    <th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
    <td>{{user.username}}</td>
    <td>
        <ul>
            <li ng-repeat="role in user.roles">
                {{role}}
            </li>
        </ul>
    </td>
</tr>
</table>
share|improve this question

1 Answer 1

up vote 2 down vote accepted

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:

  1. The directive is not compiled until the data from the asynchronous call is available
  2. 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:

<table ng-if="users.length" datatable-setup class="table table-bordered table-striped">

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.

share|improve this answer
    
Exactly what I needed! Thks for the explanation. –  TheEwook Apr 14 '14 at 12:27
    
You're welcome :) –  tasseKATT Apr 14 '14 at 12:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.