Angular Datatable重新渲染后显示全部记录，如何按页长展示？

问题分析 #

直接调用getData()更新数据后，Datatable未重新计算分页规则，导致忽略pageLength设置，显示全部记录。核心原因是Angular Datatable初始化后不会自动监听数据或配置的变化，需手动触发重新渲染流程。

具体解决步骤 #

1. 引入依赖并获取Datatable实例
   在组件中通过ViewChild获取DataTablesDirective实例，同时声明dtTrigger用于触发表格初始化：

   import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
   import { DataTablesDirective } from 'angular-datatables';
   import { Subject } from 'rxjs';
   import { ProductService } from './product.service';
   
   @Component({
     selector: 'app-product-list',
     templateUrl: './product-list.component.html'
   })
   export class ProductListComponent implements OnInit, OnDestroy {
     @ViewChild(DataTablesDirective, { static: false }) dtElement: DataTablesDirective;
     dtOptions: DataTables.Settings = {};
     products: any[] = [];
     dtTrigger: Subject<any> = new Subject<any>();
   
     constructor(private productService: ProductService) {}
   }
   

2. 初始化Datatable基础配置
   在ngOnInit中设置包含pageLength的基础配置，并首次加载数据：

   ngOnInit(): void {
     this.dtOptions = {
       pageLength: 15,
       ordering: true,
       searching: true
       // 其他自定义配置可按需添加
     };
     this.getData();
   }
   

3. 数据更新后手动重绘表格
   封装rerenderDatatable方法，在获取新数据后销毁旧实例并重新初始化，确保分页规则生效：

   getData(): void {
     this.productService.getProducts().subscribe(data => {
       this.products = data;
       this.rerenderDatatable();
     });
   }
   
   rerenderDatatable(): void {
     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       // 销毁当前表格实例
       dtInstance.destroy();
       // 触发表格重新初始化
       this.dtTrigger.next(null);
     });
   }
   

4. 创建产品后触发数据刷新
   在创建产品的成功回调中调用getData()，间接触发表格重新渲染：

   createProduct(product: any): void {
     this.productService.createProduct(product).subscribe(() => {
       this.getData();
     });
   }
   

5. 组件销毁时清理资源
   取消dtTrigger的订阅，避免内存泄漏：

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

6. 模板绑定Datatable指令
   确保模板中正确关联dtOptions和dtTrigger：

   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped">
     <thead>
       <tr>
         <th>产品ID</th>
         <th>产品名称</th>
         <th>价格</th>
         <!-- 其他列按需添加 -->
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let product of products">
         <td>{{ product.id }}</td>
         <td>{{ product.name }}</td>
         <td>{{ product.price }}</td>
         <!-- 其他列按需添加 -->
       </tr>
     </tbody>
   </table>
   

注意事项 #

• 如果使用服务器端分页（dtOptions.serverSide: true），需确保后端接口返回分页后的数据集，且请求参数包含start、length等分页相关信息。
• 不要直接修改dtOptions后期望自动刷新，Angular Datatable初始化后不会监听配置变化，必须通过销毁重绘的方式生效。

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