Datatables中DD.MM.YYYY HH:mm格式日期列排序失效问题咨询

问题原因 #

你遇到的排序异常是因为Datatables默认会将DD.MM.YYYY HH:mm格式的字符串识别为普通文本，按照字符ASCII码顺序排序，而非按照日期实际的时间先后排序，就会出现如下的异常现象：

解决方案1：配合Moment.js配置日期排序（适配性最高） #

这是最常用的处理方案，自定义列渲染逻辑区分显示值和排序值：

1. 先在页面引入Moment.js日期处理库
2. Datatables初始化时按如下规则配置：

$('#你的表格ID').DataTable({
  columnDefs: [
    {
      targets: 0, // 替换为你的日期列对应的列索引，从0开始计数
      render: function(data, type) {
        // 若原始数据就是已格式化的DD.MM.YYYY HH:mm字符串，指定解析格式
        const dateObj = moment(data, 'DD.MM.YYYY HH:mm');
        // 前端显示时用你需要的目标格式
        if (type === 'display') {
          return dateObj.format('DD.MM.YYYY HH:mm');
        }
        // 排序、过滤时用时间戳计算，保证排序逻辑正确
        return dateObj.isValid() ? dateObj.unix() : 0;
      }
    }
  ]
});

解决方案2：使用HTML5 data-order属性（无额外依赖） #

如果不想引入额外的JS库，可以在渲染表格HTML时，给日期列的<td>标签添加data-order属性，属性值填对应日期的Unix时间戳或者ISO标准格式日期字符串，Datatables会自动读取该属性值做排序，显示内容仍保留你需要的格式化日期：

<td data-order="1698768000">31.10.2023 16:00</td>
<td data-order="1696176000">02.10.2023 12:30</td>

该方案无需修改Datatables初始化配置，默认即可生效。

内容的提问来源于stack exchange，提问作者Emre Şimşek