Angular兼容的DataTables插件咨询：实时数据分页搜索异常问题

首先，你遇到的两个问题本质是同一个原因：你每秒直接替换整个$scope.register对象，导致ng-repeat完全重绘表格DOM。原生DataTables是绑定在初始DOM元素上的，当DOM被彻底替换后，DataTables的搜索、分页等状态就丢失了，新表格也没有被DataTables初始化，自然无法正常工作。

如果不想换插件，临时修复的话，你需要避免替换整个对象，而是只更新数组内的元素；或者在每次数据更新后先销毁旧的DataTables实例，再重新初始化——但这种方式会丢失搜索、分页状态，体验很差，所以更推荐用专门适配Angular的DataTables插件。

这里给你列几个成熟的、适合Angular 1.x的表格插件，完美解决实时数据与表格状态兼容的问题：

• angular-datatables：这是最主流的Angular适配DataTables的插件，完全集成了Angular的双向数据绑定。它会自动监听你的数据变化，同步更新表格内容，同时保留搜索、分页、排序等状态，不需要手动操作DOM。插件提供了datatable指令，配合配置项就能快速搭建功能完整的表格，完全贴合Angular的开发模式。
• ng-table：如果不需要DataTables的全部高级功能，ng-table是更轻量的选择。它是Angular生态原生的表格组件，自带分页、搜索、排序，对实时数据的支持非常顺畅，API设计更符合Angular开发者的习惯，学习成本更低。
• Smart Table：超轻量的Angular表格指令，体积小、集成简单，适合需求不复杂的场景。它同样支持实时数据更新、分页、搜索，完全基于Angular的双向绑定，数据变化时自动同步表格状态，不会出现你遇到的问题。

下面是修改后的完整代码，用angular-datatables来处理实时数据更新，解决搜索和分页的问题：

// 引入datatables依赖到你的模块
angular.module('selectExample', ['datatables'])
.controller('ExampleController', ['$scope','$interval', 'DTOptionsBuilder', function($scope,$interval, DTOptionsBuilder) {
  // 初始化数据数组
  $scope.names = [
    {name:"narquois"},{name:"vorpal"},{name:"keen"},
    {name:"argol"},{name:"long"},{name:"propolis"},
    {name:"bees"},{name:"film"},{name:"dipsetic"},
    {name:"thirsty"},{name:"opacity"},{name:"simplex"},
    {name:"jurel"},{name:"coastal "},{name:"fish"},
    {name:"kraken"},{name:"woman"},{name:"limp"},
  ];

  // 配置DataTables的基础选项（比如分页类型、每页显示条数）
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(5);

  // 模拟实时数据更新：只修改数组元素，或替换数组内容（插件会自动监听变化）
  $interval(function () {
    // 示例：随机修改一个元素的名称
    const randomIndex = Math.floor(Math.random() * $scope.names.length);
    $scope.names[randomIndex].name = `${$scope.names[randomIndex].name}!`;
    // 如果需要替换整个数组，直接赋值即可：$scope.names = newUpdatedArray;
  }, 1000);
}]);

对应的HTML部分：

<div ng-app="selectExample" ng-controller="ExampleController">
  <!-- 使用datatable指令绑定表格，关联配置项 -->
  <table datatable="" dt-options="dtOptions" width="100%">
    <thead>
      <tr align="center">
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in names">
        <td align="center">{{ person.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

这样修改后，angular-datatables会自动监听$scope.names的变化，同步更新表格内容，同时完美保留搜索、分页的状态，不会再出现你遇到的问题。

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