Angular9环境下Datatable分页、搜索及排序功能加载异常求助

排查点1：确认dtTrigger变量正确声明 #

你需要在component.ts中显式声明dtTrigger为Subject实例，这是触发Datatable重绘的核心依赖，很多使用者会遗漏该配置：

import { Subject } from 'rxjs';
// 组件类内部声明
dtTrigger: Subject<any> = new Subject<any>();

排查点2：修正数据渲染时序问题 #

你的service中如果命中localStorage缓存，会通过of()同步返回数据，此时调用dtTrigger.next()时，Angular的*ngFor还未完成DOM渲染，Datatable初始化时读取不到完整行数据，就不会生成分页、搜索、排序控件。
可以通过ChangeDetectorRef强制完成变更检测后再触发重绘，修正后的loadOrganisationsList代码：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef, private orgService: ...) {}

loadOrganisationsList() {
  this.orgService.getOrganisationsList().subscribe((res) => {
    this.organisationsList = res['Data']['Organisations'];
    // 强制Angular完成tbody行渲染
    this.cdr.detectChanges();
    // 再触发Datatable初始化
    this.dtTrigger.next();
  }, (err) => {
    if (err.status !== 403) {
      // 原有错误处理逻辑
    }
  });
}

排查点3：修正rxjs操作符写法适配Angular9 #

Angular9对应rxjs6+版本，已经不再支持链式调用.map()/.catch()，需要用pipe包裹操作符，否则可能导致Observable时序异常，修正后的service.ts代码：

import { map, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

getOrganisationsList() {
  const organisation = JSON.parse(localStorage.getItem('organisation'));
  if (organisation !== undefined && organisation !== null) {
    return of(organisation);
  } else {
    const API_URL = `${this.env.apiUrl}/Organisations`;
    return this.httpClient.get(API_URL).pipe(
      map((data: any) => {
        localStorage.setItem('organisation', JSON.stringify(data));
        return data;
      }),
      catchError((error: any) => {
        return throwError(error);
      })
    );
  }
}

排查点4：修正日期排序失效问题 #

你使用Angular的date管道格式化了日期列显示内容，Datatable的date类型解析器无法识别dd-MMM-yyyy hh:mm:ss a格式的字符串，会导致排序失效。推荐在dtOptions中通过render函数格式化日期，保留原始日期值用于排序：

1. 移除html中日期列的date管道：

<td>{{organisation.CreatedOn}}</td>
<td>{{organisation.ModifiedOn}}</td>

2. 调整dtOptions的columnDefs配置，添加render函数：

this.dtOptions = {
  pagingType: 'full_numbers',
  order: [2, 'desc'],
  columnDefs: [
    {
      targets: [4],
      orderable: false,
    }, 
    {
      targets: [2, 3],
      type: 'date',
      render: (data: any) => {
        const date = new Date(data);
        return date.toLocaleString('en-US', {
          day: '2-digit',
          month: 'short',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: true
        });
      }
    }
  ]
};

排查点5：确认依赖引入正确 #

• 确认AppModule中已经导入DataTablesModule
• 确认angular.json中已经引入Datatable的css和js依赖：

"styles": [
  "node_modules/datatables.net-dt/css/jquery.dataTables.css",
  // 其他项目样式
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js",
  // 其他项目脚本
]

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