Angular 5使用angular-datatables-5从服务取数据时分页失效问题

我之前用angular-datatables-5时也碰到过一模一样的问题——常量数据时分页完全正常，换成异步服务拉取数据后，表格能加载数据但分页直接失效。折腾了一阵才搞明白，核心原因就是异步数据加载完成后，DataTables没感知到数据变化，没触发重新渲染。给你几个具体的解决步骤：

1. 引入并配置DtTrigger #

angular-datatables专门提供了DtTrigger来处理异步数据的渲染触发，这是解决这类问题的关键：

首先在组件里引入依赖：

import { DataTablesModule } from 'angular-datatables-5';
import { DtTrigger, DtElement } from 'angular-datatables-5';

然后在组件类里注入并声明相关变量，记得组件销毁时清理trigger避免内存泄漏：

export class YourComponent implements OnInit, OnDestroy {
  films: any[] = [];
  dtOptions: DataTables.Settings = {};
  @ViewChild(DtElement) dtElement: DtElement;
  dtTrigger: DtTrigger = new DtTrigger();

  constructor(private _productListService: ProductListService) { }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

2. 模板中绑定dtTrigger #

在你的datatable标签上加上[dtTrigger]="dtTrigger"，让表格和trigger关联起来：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>

3. 异步获取数据后手动触发渲染 #

修改你调用服务的代码，在数据赋值完成后，触发DtTrigger的next()方法。如果是多次获取数据（比如分页刷新、搜索），还要先销毁之前的表格实例，避免冲突：

this._productListService.getProductList().subscribe((productListData)=>{
  // 先把服务返回的数据赋值给组件变量
  this.films = productListData;

  // 判断是否已有表格实例，有则先销毁再重新触发
  if (this.dtElement) {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.dtTrigger.next();
    });
  } else {
    // 第一次加载数据，直接触发渲染
    this.dtTrigger.next();
  }
});

4. 检查DtOptions的分页配置 #

顺便确认下你的dtOptions里分页是开启状态，比如：

this.dtOptions = {
  pagingType: 'full_numbers', // 可选的分页样式
  pageLength: 10, // 每页默认显示条数
  searching: true, // 可选，开启搜索功能
  ordering: true // 可选，开启排序功能
};

这么调整之后，DataTables就能正确感知到异步加载的数据，分页功能应该就正常工作了。

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