使用date-fns parse转换时长后DataTables排序结果异常问题

错误原因 #

1. this指向失效：在DataTables的自定义排序函数中，this并未指向你定义convertStringToDate方法的上下文，导致转换函数未被正确调用，实际是对原始字符串做字典序排序。字符串比较时，"12h..."的首字符'1'小于"2h..."的'2'，因此"12h..."会被排在"2h..."之后，直接导致排序结果不符合预期。

2. 时长转日期的逻辑错误：date-fns的parse方法是用于解析日期字符串（如"2024-05-20 02:02:13"），而非处理时长。你传入的"5d"会被解析为当月5号，而非当前日期加5天，这种方式完全偏离了时长比较的需求，还会受当前日期影响，无法准确反映时长的实际长短。

解决方法 #

1. 替换转换逻辑：将时长转为总秒数

放弃用日期对象存储时长，直接把时长字符串转换为总秒数，数字比较是最可靠的排序方式：

convertDurationToSeconds(value) {
    let totalSeconds = 0;
    // 拆分时长各部分
    const parts = value.split(', ');
    parts.forEach(part => {
        // 提取数字和单位
        const num = parseInt(part.match(/\d+/)[0]);
        const unit = part.match(/[dhms]/)[0];
        // 累加对应秒数
        switch(unit) {
            case 'd': totalSeconds += num * 86400; break; // 1天=86400秒
            case 'h': totalSeconds += num * 3600; break;  // 1小时=3600秒
            case 'm': totalSeconds += num * 60; break;    // 1分钟=60秒
            case 's': totalSeconds += num; break;
        }
    });
    return totalSeconds;
}

2. 修复排序函数的this指向，实现数字排序

先保存上下文引用，避免this指向错误，然后直接比较转换后的秒数：

// 保存当前上下文，确保能调用转换函数
const that = this;

// 升序排序：数值小的在前
$.fn.dataTableExt.oSort["customDuration-asc"] = (a, b) => {
    const aSec = that.convertDurationToSeconds(a);
    const bSec = that.convertDurationToSeconds(b);
    return aSec - bSec;
};

// 降序排序：数值大的在前
$.fn.dataTableExt.oSort["customDuration-desc"] = (a, b) => {
    const aSec = that.convertDurationToSeconds(a);
    const bSec = that.convertDurationToSeconds(b);
    return bSec - aSec;
};

3. 配置DataTables列使用自定义排序类型

在列配置中指定type为自定义的排序类型：

$('#your-table-id').DataTable({
    columns: [
        // 其他列配置...
        {
            data: 'duration', // 对应你的时长数据字段
            type: 'customDuration'
        }
    ]
});

验证结果 #

转换后的各时长总秒数：

• 2h, 2m, 13s → 7333秒
• 5d, 3h, 49m, 42s → 445782秒
• 2h, 0m, 13s → 7213秒
• 12h, 32m, 13s → 45133秒

降序排序后秒数顺序为：445782 > 45133 > 7333 > 7213，完全符合你的预期排序结果。

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