AngularJS集成jQuery DataTable时，数据需两次点击按钮才刷新的问题

这个问题我之前也碰到过，核心原因是Angular的异步数据绑定和jQuery DataTable的DOM操作不同步，再加上重复初始化表格的操作导致的。咱们一步步来解决：

问题根源分析 #

你当前的代码每次点击搜索都会调用$('#dtBasicExample').DataTable()，这会重复初始化DataTable：

• 第一次点击时，$http返回数据后赋值给$scope.itemData，但Angular的digest cycle还没完成（也就是数据还没渲染到DOM上），此时初始化DataTable，表格读取的是空白的DOM内容，所以看不到数据；
• 第二次点击时，DOM已经渲染了第一次的数据，初始化表格时能读取到内容，同时新的数据也会被渲染，所以看起来正常，但这其实是错误的重复初始化，可能会引发控制台报错或性能问题。

正确的解决方案 #

我们需要只初始化一次DataTable，之后用DataTable的API来更新数据，同时确保Angular完成数据绑定后再操作表格：

1. 先初始化空的DataTable实例 #

在控制器初始化时（比如$onInit或者控制器顶部）创建DataTable实例，提前配置好列信息：

// 控制器初始化时创建DataTable实例（只执行一次）
$scope.dtInstance = $('#dtBasicExample').DataTable({
  // 根据你的数据结构配置列，示例如下
  columns: [
    { data: 'EmployeeCode', title: '员工编号' },
    { data: 'Name', title: '员工姓名' },
    // 其他列根据你的itemData字段添加
  ],
  // 可以添加其他配置，比如分页、排序等
  paging: true,
  searching: false // 因为我们自己做了搜索，关闭表格自带的搜索
});

2. 修改搜索函数，用API更新数据 #

不再重复初始化表格，而是用DataTable的clear()、rows.add()、draw()方法更新数据，同时用$timeout确保Angular完成数据绑定后再操作：

$scope.SearchData = function () {
  // 建议用Angular的ng-model获取输入值，避免直接操作DOM
  var myData = {
    EmployeeCode: $scope.personCode // 对应HTML里的ng-model="personCode"
  };

  $http.post("/admin/GetData", myData)
    .then(function (response) {
      $scope.itemData = response.data.Initiator;

      // 用$timeout等待Angular完成digest cycle，确保数据已渲染到DOM
      $timeout(function() {
        // 清除表格现有数据
        $scope.dtInstance.clear();
        // 添加新数据
        $scope.dtInstance.rows.add($scope.itemData);
        // 刷新表格显示
        $scope.dtInstance.draw();
      });
    });
};

3. 优化输入框的绑定方式 #

把直接用jQuery获取输入值改成Angular的ng-model，更符合Angular的开发规范：

<!-- 原来的输入框改成带ng-model的 -->
<input type="text" id="Person" ng-model="personCode" placeholder="输入员工编号搜索" />
<button ng-click="SearchData()">搜索</button>

<!-- 表格部分保持原来的结构，比如： -->
<table id="dtBasicExample" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>员工编号</th>
      <th>员工姓名</th>
      <!-- 其他表头 -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in itemData">
      <td>{{item.EmployeeCode}}</td>
      <td>{{item.Name}}</td>
      <!-- 其他列 -->
    </tr>
  </tbody>
</table>

额外提示 #

• 确保已经引入了jQuery、DataTable的JS和CSS文件，顺序是：jQuery → DataTable JS → DataTable CSS；
• 如果你不需要ng-repeat渲染DOM，也可以直接用DataTable的data选项加载数据，跳过Angular的DOM绑定，这样更高效：

  $http.post("/admin/GetData", myData)
    .then(function (response) {
      // 直接用DataTable API加载数据，无需ng-repeat
      $scope.dtInstance.clear().rows.add(response.data.Initiator).draw();
    });
  

  这种方式不需要$timeout，因为直接操作表格的数据，不依赖Angular的DOM绑定。

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