Angular DataTable日期时间列格式化后排序异常问题求助

问题根因 #

• Angular DataTable默认对单元格渲染后的字符串内容做字典序排序，你格式化后的dd/MM/yyyy hh:mm a格式字符串的比较逻辑不符合日期先后顺序，比如05/07/2021会被判定为大于30/06/2021，最终出现排序异常。
• ISO 8601格式（YYYY-MM-DDTHH:MM:SS）的原始日期字符串本身支持按字典序排序得到正确的时间顺序，只需要调整排序的取值依据即可解决问题。

解决方案 #

核心逻辑是指定日期列排序时读取原始ISO格式日期值，渲染时展示格式化后的日期字符串，两种逻辑分离互不影响，以下是可直接运行的实现示例：

1. 组件TS配置 #

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

interface TableRow {
  DateTime: string;
  Product: string;
  PurchasedBy: string;
}

@Component({
  selector: 'app-date-table',
  templateUrl: './date-table.component.html',
  providers: [DatePipe]
})
export class DateTableComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  tableData: TableRow[] = [];

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    // 模拟API返回数据
    this.tableData = [
      { DateTime: "2021-06-28T10:45:24.49", Product: "Product 1", PurchasedBy: "Jones" },
      { DateTime: "2021-06-30T14:30:00.00", Product: "Product 2", PurchasedBy: "Smith" },
      { DateTime: "2021-07-05T09:15:10.00", Product: "Product 3", PurchasedBy: "Brown" }
    ];

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      order: [[0, 'desc']], // 默认按第一列（日期列）降序
      columnDefs: [
        {
          targets: 0, // 对应日期列的索引，从0开始计数
          // 自定义渲染逻辑，展示格式化后日期
          render: (data: string) => {
            return this.datePipe.transform(data, 'dd/MM/yyyy hh:mm a') || data;
          }
        }
      ],
      data: this.tableData,
      columns: [
        { data: 'DateTime', title: '日期时间' },
        { data: 'Product', title: '产品' },
        { data: 'PurchasedBy', title: '购买人' }
      ]
    };
  }
}

2. 组件HTML模板 #

<table datatable [dtOptions]="dtOptions" class="table table-bordered table-striped"></table>

保留原有模板写法的兼容方案 #

如果你不想修改现有手动循环渲染的模板逻辑，只需要在dtOptions中新增columnDefs配置指定排序依据即可，不需要调整渲染逻辑：

// TS中新增配置
this.dtOptions = {
  columnDefs: [
    {
      targets: 0, // 日期列对应的索引
      orderData: 0 // 排序时读取原始绑定的DateTime值，忽略渲染后的字符串
    }
  ]
}

HTML保持你原有写法即可：

<table datatable [dtOptions]="dtOptions" class="table table-striped">
  <thead>
    <tr>
      <th>日期时间</th>
      <th>产品</th>
      <th>购买人</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{item.DateTime | date: 'dd/MM/yyyy hh:mm a'}}</td>
      <td>{{item.Product}}</td>
      <td>{{item.PurchasedBy}}</td>
    </tr>
  </tbody>
</table>

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