C# MVC 修复DataTable时间排序以及中英文系统的时间筛选问题

原文档中的代码，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配置：

"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中的筛选逻辑：

$.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. 同时满足工序和时间筛选才返回truereturn processMatch && timeMatch;}
);

关键修复点：

• 用settings.aoData[dataIndex]._aFilterData[orderIndex]直接获取 Time 列的 “筛选用时间戳”（避免解析显示文本）；
• 所有时间比较基于getTime()返回的毫秒级时间戳（数字类型，无格式差异问题）。