网站日期排序异常求助：Datatables如何排序%m-%d-%Y格式日期字符串

我来帮你搞定Datatables里%m-%d-%Y格式日期排序失效的问题！这事儿我碰到过好多次，给你两个靠谱的解决方案：

方法一：自定义日期排序插件（适合前端只有字符串日期的情况） #

Datatables默认会把日期字符串当成普通文本排序，所以咱们得给它写个自定义规则，让它能正确解析mm-dd-yyyy格式的日期。

步骤1：注册自定义排序插件 #

在你的JS代码里先加这段，注册一个针对mm-dd-yyyy格式的排序器：

// 注册mm-dd-yyyy格式的日期排序规则
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "us-date-pre": function(a) {
        // 把mm-dd-yyyy转换成时间戳，方便数值比较
        const [month, day, year] = a.split('-');
        // 注意月份是从0开始的，所以要减1
        return Date.parse(new Date(year, month - 1, day)) || 0;
    },
    "us-date-asc": function(a, b) {
        return a < b ? -1 : (a > b ? 1 : 0);
    },
    "us-date-desc": function(a, b) {
        return a < b ? 1 : (a > b ? -1 : 0);
    }
});

步骤2：初始化Datatables时指定列类型 #

初始化表格的时候，把“采集日期”列的类型指定为咱们刚才注册的us-date，同时设置默认降序：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        // 这里的[1, "desc"]表示第2列（索引从0开始）默认降序，替换成你的采集日期列索引
        "order": [[1, "desc"]],
        "columnDefs": [
            // targets是你的采集日期列索引，type指定为自定义的us-date
            { "type": "us-date", "targets": 1 }
        ]
    });
});

方法二：用隐藏列存储可排序日期（适合后端有datetime对象的情况） #

既然你的Django后端能拿到datetime对象，咱们可以在渲染表格的时候加一个隐藏列，存ISO格式的日期（YYYY-MM-DD）或者时间戳，让Datatables根据这个隐藏列排序，显示的列还是用%m-%d-%Y格式，这种方法更稳定不容易出错。

步骤1：在Django模板里添加隐藏列 #

<table id="your-table-id">
    <thead>
        <tr>
            <th>其他字段</th>
            <th>采集日期</th>
            <!-- 隐藏列：存储ISO格式日期用于排序 -->
            <th style="display: none;">排序日期</th>
        </tr>
    </thead>
    <tbody>
        {% for item in your_data_list %}
        <tr>
            <td>{{ item.other_field }}</td>
            <!-- 显示给用户的mm-dd-yyyy格式 -->
            <td>{{ item.collect_date|date:"m-d-Y" }}</td>
            <!-- 隐藏的ISO格式日期，用于排序 -->
            <td style="display: none;">{{ item.collect_date|date:"Y-m-d" }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

步骤2：初始化Datatables时指定排序依据 #

让显示的“采集日期”列使用隐藏列的排序数据，同时设置默认降序：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        // 隐藏列的索引是2，设置默认降序
        "order": [[2, "desc"]],
        "columnDefs": [
            // targets是显示的采集日期列索引（1），orderData指定用隐藏列（2）的排序数据
            { "orderData": 2, "targets": 1 }
        ]
    });
});

小提示 #

• 列索引是从0开始的，记得替换成你实际的列位置哦！
• 如果后端传递的是datetime对象，优先选方法二，避免前端解析日期可能出现的兼容性问题；如果只有字符串日期，方法一就足够用了。

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