AngularJS - Jquery datatable空 [英] AngularJS - Jquery datatable empty

问题描述

我正在尝试使用angular和jquery datatable显示一个datatable，但到目前为止，datatable在应用datatable函数后保持为空。

我已经看到最好的方法是使用一个指令，但是我不能让它工作。这只有我设法使其工作的是通过应用100 ms的超时（超时时间少于100个不起作用）

我想要do是在呈现DOM之后应用datatable函数。我确定有人设法这样做;）

userController.js

  myApp.controller（'UserController'，['$ scope'，'User'，
函数（$ scope，User）{
 
用户.query（function（data）{
 $ scope.users = data; 
}，function（errorData）{
}）; 
 
}]）; 
  

datatableSetup.js

pre> 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>用户名< / th> 
< th>角色< / th> 
< / tr> 
< / thead> 
< tbody> 
< trng-repeat =用户在用户> 
< td> {{user.username}}< / td> 
< td> 
< ul> 
< li ng-repeat =user.roles中的角色> 
 {{role}} 
< / li> 
< / ul> 
< / td> 
< / tr> 
< / table> 
  

解决方案

将DataTables插件与AngularJS集成并使用DOM作为数据源，您需要等待DOM完成呈现，然后再调用' dataTable（）'。

如果您正在检索要异步呈现的数据，您需要等待该数据可用。

我的猜测是，在这种情况下，100ms延迟正在使用的都足以使这两个都完成。

要在DOM渲染后运行某些东西，通常可以将呼叫包裹在 $超时，而不指定延迟。这将在执行队列的末尾调用该函数，当它运行时Angular应该已经完成​​$ digest循环，并且应该已经呈现所有应用：

  app.directive（'datatableSetup'，['$ timeout'，
 function（$ timeout）{
 return {
 restrict：'A'，
 link ：function（scope，element，attrs）{
 
 $ timeout（function（）{
 element.dataTable（）; 
}）; 
} 
} 
} 
]）; 
  

现在，您需要确保：

1. 在异步调用的数据可用之前，该指令不会被编译。


2. 指令的链接中的$ timeout代码不会运行，直到数据从异步呼叫可用

如果你想去第一条路线，你可以放一个 ng-if 在表元素上延迟创建DOM部分（和编译指令）直到数据可用。您可以检查用户数组是否包含数据，或者在数据完成加载时将变量设置为true：

 < table ng-if =users.lengthdatatable-setup class =table table-bordered table-striped> 
  

演示： http://plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv?p=preview

对于第二条路线多个选项。例如，您可以使用链接功能内的观察者，在使用时注销，使用$ broadcast / $ emit或甚至服务或某些自定义通知系统。

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>

解决方案

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.

这篇关于AngularJS - Jquery datatable空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！