Angular最新版DataTables排序与分页功能不显示问题求助

我在Angular项目中参考教程创建DataTable，已安装对应插件并导入模块，运行代码无报错，但显示条目按钮、排序及分页功能未生效，请求协助排查。

现有代码 #

HTML #

<div class="table-responsive">
  <table class="table table-striped" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Tin</th>
        <th scope="col">Corporate Name</th>
        <th scope="col">Contact Number</th>
        <th scope="col">Business Address</th>
        <th scope="col">Date of Registration</th>
        <th colspan="3" style="text-align: center; width: 15%">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of allUsers">
        <td>{{ user.id }}</td>
        <td>{{ user.address.zipcode }}</td>
        <td>{{ user.company.name }}</td>
        <td>{{ user.phone }}</td>
        <td>{{ user.address.street }}, {{ user.address.city }}</td>
        <td>{{ user.email }}</td>
        <td>
          <button type="button" class="btn btn-dark">
            <i class="bi bi-pencil"></i>
          </button>
        </td>
        <td>
          <button type="button" class="btn btn-danger">
            <i class="bi bi-trash"></i>
          </button>
        </td>
        <td>
          <button type="button" class="btn btn-primary">
            <i class="bi bi-eye"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

TypeScript #

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DataService } from 'src/app/service/data.service';
import { DataTableDirective } from 'angular-datatables';
import {Subject} from 'rxjs';

@Component({
  selector: 'app-overall',
  templateUrl: './overall.component.html',
  styleUrls: ['./overall.component.scss']
})
export class OverallComponent implements OnInit, OnDestroy{
  @ViewChild(DataTableDirective, { static: false })
  private dtElement!: DataTableDirective;
  
  overall: any
  allUsers: any;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  
  constructor(private service: DataService) { }

  ngOnInit(): void {
    
    this.service.users().subscribe((res: any) => {
          this.allUsers = res;
        });
        this.dtOptions = {
        pagingType: 'full_numbers', // Enable pagination
        order: [[0, 'asc']], // Enable sorting on the first column (index 0)
      };
  }
  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       dtInstance.destroy();
       this.dtTrigger.next(undefined);     
    });
  }
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

效果对比 #

• 当前效果：
  
• 期望效果：
  

排查及解决方法 #

1. 修正数据加载与DataTables初始化顺序 #

当前代码中dtTrigger未在数据加载完成后触发，导致DataTables初始化时表格还没有数据，无法激活分页、排序等功能。修改ngOnInit方法：

ngOnInit(): void {
  // 先配置dtOptions，确保功能开启
  this.dtOptions = {
    pagingType: 'full_numbers',
    order: [[0, 'asc']],
    paging: true,
    ordering: true,
    lengthChange: true,
    info: true,
    dom: 'lfrtip' // 指定显示的控件区域：l=条目选择、f=搜索框、r=加载提示、t=表格、i=信息、p=分页
  };

  this.service.users().subscribe((res: any) => {
    this.allUsers = res;
    // 数据加载完成后再触发DataTables初始化
    this.dtTrigger.next(undefined);
  });
}

2. 确认DataTables样式与脚本已正确引入 #

缺少样式文件会导致控件不显示，需在angular.json中配置：

• 在styles数组添加：

"styles": [
  "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css",
  // 其他项目样式文件
]

• 在scripts数组添加：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/datatables.net/js/jquery.dataTables.min.js",
  "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"
]

3. 检查模块导入是否完整 #

确保在对应模块中导入了DataTablesModule：

import { DataTablesModule } from 'angular-datatables';

@NgModule({
  imports: [
    // 其他模块
    DataTablesModule
  ]
})
export class YourModule { }

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