如何让Legacy jQuery DataTables支持澳大利亚日期格式排序？

虽然原生JavaScript可以识别dd/MMM/yyyy格式的日期，但DataTables的默认date类型排序器有自己的日期解析规则（仅支持文档指定的格式，比如"Mar 26, 2008 5:03 PM"），所以会把这类日期当成字符串排序，导致结果异常。下面提供两种可行的解决方法：

方法一：自定义澳大利亚日期排序类型 #

通过注册自定义排序规则，手动解析dd/MMM/yyyy格式的日期为时间戳，基于时间戳进行排序：

1. 注册自定义排序函数 #

// 注册升序排序规则
jQuery.fn.dataTableExt.oSort['australian_date-asc'] = function(a, b) {
    const parseAustralianDate = (dateStr) => {
        const [day, monthAbbr, year] = dateStr.split('/');
        // 月份缩写转数字（0-11对应1-12月）
        const monthMap = {
            Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5,
            Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11
        };
        return new Date(year, monthMap[monthAbbr], day).getTime();
    };
    const timestampA = parseAustralianDate(a);
    const timestampB = parseAustralianDate(b);
    return timestampA < timestampB ? -1 : timestampA > timestampB ? 1 : 0;
};

// 注册降序排序规则
jQuery.fn.dataTableExt.oSort['australian_date-desc'] = function(a, b) {
    const parseAustralianDate = (dateStr) => {
        const [day, monthAbbr, year] = dateStr.split('/');
        const monthMap = {
            Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5,
            Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11
        };
        return new Date(year, monthMap[monthAbbr], day).getTime();
    };
    const timestampA = parseAustralianDate(a);
    const timestampB = parseAustralianDate(b);
    return timestampA < timestampB ? 1 : timestampA > timestampB ? -1 : 0;
};

2. 在DataTables初始化时指定列类型 #

$('#your-table-id').dataTable({
    "aoColumns": [
        // 其他列配置...
        { "sType": "australian_date" }, // 对应日期列使用自定义排序类型
        // 其他列配置...
    ]
});

方法二：使用隐藏列存储时间戳 #

如果不想自定义排序规则，可以在HTML中添加隐藏列存储对应日期的时间戳，让DataTables基于数字类型排序：

1. 修改HTML结构 #

<tr>
    <td>08/Mar/2024</td> <!-- 显示的日期列 -->
    <td style="display: none;">1709846400000</td> <!-- 隐藏的时间戳列，对应日期的毫秒级时间戳 -->
</tr>

2. 配置DataTables排序依赖 #

$('#your-table-id').dataTable({
    "aoColumns": [
        { "bSortable": true, "iDataSort": 1 }, // 第一列显示，使用第二列（索引1）的数据排序
        { "bVisible": false } // 隐藏第二列
    ]
});

两种方法都能解决dd/MMM/yyyy格式日期的排序问题，可根据项目实际情况选择。

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