DataTable多格式日期列排序失效问题求助

问题现象 #

使用DataTable时，日期列同时存在单日期（如Mar 5, 2024）和日期范围（如Mar 4 - 7, 2024）两种格式，按日期升序排序时结果错误——例如Jul 30 - 31, 2024会排在Mar 5, 2024之前。

原代码如下：

JavaScript代码 #

$(document).ready(function() {
   
   var table = $('#test').DataTable({
  responsive: true,
  paging: false,
  lengthChange: false,
fixedHeader: true,
columnDefs: [
  {
    targets: 2,
    type: 'date',
  }
],
 
order:[[  2, 'asc' ]]
 
 } );
 
} );

HTML代码 #

<table class="row-border stripe dt-right dataTable no-footer dtr-inline" id="test" style="width: 100%;">
<thead text-align="left">
<tr>
<th>Event</th>
<th>City, State</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>My first event</td>
<td>Devnver,CO</td>
<td>Mar 4 - 7, 2024</td>
</tr>
 
<tr>
<td>My third event</td>
<td>Devnver,CO</td>
<td>Mar 5, 2024</td>
</tr>
 
<tr>
<td>My second event</td>
<td>Devnver,CO</td>
<td>Jul 30 - 31, 2024</td>
</tr>
 
<tr>
<td>My fourth event</td>
<td>Devnver,CO</td>
<td>Mar 5, 2024</td>
</tr>
</tbody>
</table>

解决方案 #

问题根源是DataTable默认的date类型无法识别混合格式的日期，需要自定义排序规则，提取每个日期单元格的起始日期并转换为可排序的标准格式：

步骤1：注册自定义排序类型 #

给DataTable注册专门处理混合日期格式的排序规则：

// 注册自定义排序预处理函数
$.fn.dataTable.ext.type.order['custom-date-pre'] = function (dateStr) {
    // 提取起始日期（单日期直接用原内容，日期范围取第一个日期）
    const startDateStr = dateStr.split(' - ')[0].trim();
    // 转换为时间戳用于排序比较，异常情况返回0
    return new Date(startDateStr).getTime() || 0;
};

步骤2：修改DataTable配置 #

在columnDefs中指定使用自定义排序类型，替换原有的type: 'date'：

$(document).ready(function() {
    // 注册自定义排序规则
    $.fn.dataTable.ext.type.order['custom-date-pre'] = function (dateStr) {
        const startDateStr = dateStr.split(' - ')[0].trim();
        return new Date(startDateStr).getTime() || 0;
    };

    var table = $('#test').DataTable({
        responsive: true,
        paging: false,
        lengthChange: false,
        fixedHeader: true,
        columnDefs: [
            {
                targets: 2,
                type: 'custom-date' // 使用自定义排序类型
            }
        ],
        order: [[2, 'asc']]
    });
});

原理说明 #

自定义排序函数会拆分日期内容，提取出每个单元格的起始日期，将其转换为时间戳（数字类型）。DataTable基于时间戳数值排序，就能保证日期顺序正确。修改后正确排序结果为：

1. Mar 4 - 7, 2024
2. Mar 5, 2024
3. Mar 5, 2024
4. Jul 30 - 31, 2024

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