Angular已填充数据却显示‘无可用数据’，ng-repeat与DataTable集成求助

嘿，我懂你碰到的这个坑！你遇到的问题本质上是AngularJS的异步DOM渲染和DataTable初始化时机不匹配导致的：当你在angular.element(document).ready()里初始化DataTable时，Angular还没完成ng-repeat的渲染工作，这时候表格里根本没有生成对应的行，DataTable自然会显示“无可用数据”。

下面给你两个靠谱的解决方案：

方案一：用Angular的$timeout延迟初始化 #

$timeout会把你的代码放到Angular的消化周期（digest cycle）之后执行，这时候ng-repeat已经把所有数据行渲染到DOM里了，DataTable就能正确识别到这些行。

修改你的代码：

// 假设你的Angular模块和控制器是这样的
angular.module('myApp', [])
.controller('MyController', function($scope, $timeout) {
  // 这里是你的数据（如果是异步获取的，要确保数据加载完成后再执行下面的代码）
  $scope.dataList = [
    {name: "张三", email: "zhangsan@example.com", address: "北京", phone: "138xxxx1234"},
    {name: "李四", email: "lisi@example.com", address: "上海", phone: "139xxxx5678"}
  ];

  // 用$timeout确保DOM渲染完成后初始化DataTable
  $timeout(function() {
    $('#table').DataTable();
  });
});

方案二：监听ng-repeat的$last事件初始化 #

这种方法更精准，只有当ng-repeat渲染完最后一行数据时，才触发DataTable的初始化，适合数据量较大或者异步加载数据的场景。

首先修改HTML模板：

<table id="table">
  <thead>
    <!-- 别忘了表头哦 -->
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th>地址</th>
      <th>电话</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="d in dataList" ng-init="checkAndInitTable($last)">
      <td> {{d.name}} </td>
      <td> {{d.email}} </td>
      <td> {{d.address}} </td>
      <td> {{d.phone}} </td>
    </tr>
  </tbody>
</table>

然后在控制器里添加对应的方法：

angular.module('myApp', [])
.controller('MyController', function($scope, $timeout) {
  $scope.dataList = [/* 你的数据 */];

  $scope.checkAndInitTable = function(isLastRow) {
    // 只有当最后一行渲染完成时才初始化
    if (isLastRow) {
      $timeout(function() {
        $('#table').DataTable();
      });
    }
  };
});

额外提醒 #

• 如果你的dataList是通过异步请求（比如$http）获取的，一定要在数据成功返回后再执行初始化逻辑，比如放在$http.get().then()的回调里。
• 确保你已经正确引入了DataTable的CSS和JS文件，不然表格样式和功能会出问题。

内容的提问来源于stack exchange，提问作者Jonathan