目录
-
- [一、Time 列未按降序排列的原因及修复](#一、Time 列未按降序排列的原因及修复)
-
- [1. 核心原因：排序基于 "格式化后字符串"，而非 "时间戳"](#1. 核心原因：排序基于 “格式化后字符串”，而非 “时间戳”)
- [2. 修复方案：指定 "原始时间戳" 为排序依据](#2. 修复方案：指定 “原始时间戳” 为排序依据)
- [二、开始时间 / 结束时间筛选失效的原因及修复](#二、开始时间 / 结束时间筛选失效的原因及修复)
-
- [1. 核心原因：筛选逻辑中的 "时间格式解析错误"](#1. 核心原因：筛选逻辑中的 “时间格式解析错误”)
- [2. 修复方案：基于 "原始时间戳" 筛选，避开格式差异](#2. 修复方案：基于 “原始时间戳” 筛选，避开格式差异)
原文档中的代码，Time 列排序失效、时间筛选失效及中英文系统时间兼容 问题，本质均源于时间数据格式处理逻辑错误或不完整，以下是具体原因诊断及解决方案：
下图是旧的代码
一、Time 列未按降序排列的原因及修复
1. 核心原因：排序基于 "格式化后字符串"，而非 "时间戳"
DataTable 默认按列的最终渲染文本排序，而当前代码中 Time 列通过render函数将时间戳转为"2024/10/08 15:30:00"这类字符串。
- 字符串排序规则是 "按字符 ASCII 码逐位比较"（如 "2024/10/08" > "2024/09/30" 看似正确，但本质是字符串比较，非时间逻辑）；
- 更关键的是：代码中order: [[orderIndex, "desc"]]（orderIndex=6对应 Time 列），但未告诉 DataTable "按原始时间戳排序"，导致排序逻辑混乱。
2. 修复方案：指定 "原始时间戳" 为排序依据
通过 DataTable 的columns.render配置，分离 "显示文本" 和 "排序用原始值"，让排序基于时间戳（数字类型，天然支持正确排序）。
修改代码中 Time 列的columns配置：
javascript
"columns": [
// 其他列配置不变...
{
data: "Time", // 原始数据（假设是类似"/Date(1728380400000)/"的JSON时间格式）
render: function (data, type, row) {
// type参数："display"=页面显示，"sort"=排序用，"filter"=筛选用
if (!data) {
return type === "display" ? "NULL" : "";
}
// 提取时间戳（处理"/Date(123456789)/"格式）
const timestamp = parseInt(data.substr(6));
if (type === "sort" || type === "filter") {
return timestamp; // 排序/筛选时用时间戳（数字）
} else { // display时用格式化字符串
const date = new Date(timestamp);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}
}
}
]关键说明：
- type === "sort"时返回时间戳（数字），DataTable 会按数字大小排序，彻底解决 "字符串排序错误"；
- 保留display时的格式化文本，不影响页面展示。
二、开始时间 / 结束时间筛选失效的原因及修复
1. 核心原因：筛选逻辑中的 "时间格式解析错误"
当前代码中，从表格数据提取时间并转为getTime()的逻辑存在 2 个致命问题：
- 错误 1：依赖data[orderIndex]（即 Time 列的显示文本，如"2024/10/08 15:30:00"），而非原始时间戳；
- 错误 2：手动拆分时间字符串（parts = dateString.split(/[\s/:]/)），但未考虑中英文系统的toLocaleDateString()格式差异（如中文是"2024/10/08"，英文是"10/08/2024"），导致拆分后年份 / 月份 / 日期顺序混乱，无法正确转为Date对象。
2. 修复方案：基于 "原始时间戳" 筛选，避开格式差异
利用 DataTable 的columns.render已返回的 "筛选用时间戳"（见第一部分修复），直接通过settings.aoData获取每行的原始筛选值，避免解析显示文本。
修改$.fn.dataTable.ext.search中的筛选逻辑：
javascript
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
// 1. 获取工序筛选条件（保留原逻辑）
const dropdown = document.getElementById("StepId");
const selectedText = dropdown.options[dropdown.selectedIndex].text;
const process = data[0] || ""; // 第0列是工序
const processMatch = selectedText === "--选择工序--" || process === selectedText;
// 2. 处理时间筛选：基于原始时间戳（关键修复）
const minTime = $('#min').val() ? new Date($('#min').val()).getTime() : NaN; // 输入的开始时间戳
const maxTime = $('#max').val() ? new Date($('#max').val()).getTime() : NaN; // 输入的结束时间戳
// 获取当前行Time列的"筛选用时间戳"（来自columns.render的filter类型返回值）
const rowTime = settings.aoData[dataIndex]._aFilterData[orderIndex]; // orderIndex=6（Time列）
const rowTimestamp = rowTime ? parseInt(rowTime) : NaN;
// 3. 时间合法性校验（保留原逻辑）
if (!isNaN(minTime) && !isNaN(maxTime) && minTime > maxTime) {
errorMessage.textContent = '结束时间必须晚于开始时间。';
return false;
} else {
errorMessage.textContent = '';
}
// 4. 时间匹配逻辑（基于时间戳比较）
const timeMatch = (isNaN(minTime) && isNaN(maxTime)) || // 未选时间
(isNaN(minTime) && rowTimestamp <= maxTime) || // 只选结束时间
(minTime <= rowTimestamp && isNaN(maxTime)) || // 只选开始时间
(minTime <= rowTimestamp && rowTimestamp <= maxTime); // 都选
// 5. 同时满足工序和时间筛选才返回true
return processMatch && timeMatch;
}
);关键修复点：
- 用settings.aoData[dataIndex]._aFilterData[orderIndex]直接获取 Time 列的 "筛选用时间戳"（避免解析显示文本）；
- 所有时间比较基于getTime()返回的毫秒级时间戳（数字类型，无格式差异问题）。