Datatable created in AngularJS directive is detached from data

Question

I'm trying to use datatables with angularjs and the best way I've seen so far is inside a directive so this is my directive example:

adminApp.directive('tableExample', function(adminUserREST) {
return {
    restrict: 'E',
    templateUrl: 'templates/adminApp/directives/tableTemplate.jsp',
    replace: true,
    scope: true,
    controller: function($scope) {
          $scope.adminUsers = adminUserREST.getAllAdminUsers();
    },
    link: function(scope, elements, attrs) {
        var table = $("#sample_editable_1");
        var oTable = table.dataTable({
            "lengthMenu": [
                [5, 10, 15, 20, -1],
                [5, 10, 15, 20, "All"]
            ],
            "pageLength": 10,
            "columnDefs": [{
                'orderable': true,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "order": [
                [0, "asc"]
            ]
        });
    }
}
});

and this is the template:

<div>
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
    <thead>
        <tr>
            <th>
                 Username
            </th>
            <th>
                 Full Name
            </th>
            <th>
                 Points
            </th>
            <th>
                 Notes
            </th>
            <th>
                 Edit
            </th>
            <th>
                 Delete
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="adminUser in adminUsers | orderBy:'username'">
            <td>
                 {{ adminUser.username }}
            </td>
            <td>
                {{ adminUser.password }}
            </td>
            <td>
                 {{ adminUser.fullName }}
            </td>
            <td class="center">
                 {{ adminUser.notes }}
            </td>
            <td>
                <a class="edit" href="javascript:;">
                Edit </a>
            </td>
            <td>
                <a class="delete" href="javascript:;">
                Delete </a>
            </td>
        </tr>
    </tbody>
</table>
</div>

adminUserREST is a REST service that return a list of adminUser objects. The problem here seems that table.dataTable({...}) is called before the ng-repeat finished manipulating the DOM. The end result is a table filled with the correct rows by ng-repeat but disconnected by the datatable features because it sees 0 results.

Any help?

see also -> http://stackoverflow.com/q/30940271/1407478 – davidkonrad Jun 22 '15 at 14:02 — davidkonrad, Jun 22 '15 at 14:02

score 0 · Answer 1 · answered Jun 22 '15 at 14:00

Because your REST service calls http, it must be a promise. And you have to create your dataTable after promise resolves and after the DOM updates for ng-repeat (so I put it in a $timeout):

adminApp.directive('tableExample', function ($timeout, adminUserREST) {
    return {
        restrict: 'E',
        templateUrl: 'templates/adminApp/directives/tableTemplate.jsp',
        replace: true,
        scope: true,
        link: function (scope, elements, attrs) {
            adminUserREST.getAllAdminUsers().then(function (response) {
                scope.adminUsers = response;
                $timeout(function(){
                  var table = $("#sample_editable_1");
                  var oTable = table.dataTable({
                      "lengthMenu": [
                          [5, 10, 15, 20, -1],
                          [5, 10, 15, 20, "All"]
                      ],
                          "pageLength": 10,
                          "columnDefs": [{
                          'orderable': true,
                              'targets': [0]
                      }, {
                          "searchable": true,
                              "targets": [0]
                      }],
                          "order": [
                          [0, "asc"]
                      ]
                  });
                });
            });
        }
    }
});

Datatable created in AngularJS directive is detached from data

1 Answers1