如何在jQuery DataTables中实现单列年月自定义搜索

问题背景 #

表格日期列格式为mm/dd/yyyy，使用列页脚搜索框输入mm/yyyy（如03/2023）时，会错误匹配包含dd/yyyy片段的日期（例如01/03/2023会被误筛出），无法精准定位指定年月的记录；此前尝试自定义DataTable.ext.search逻辑未解决问题，临时方案需同时操作两个搜索框，体验不佳。

解决思路 #

1. 禁用日期列默认搜索：默认字符串匹配会导致片段误判，改用自定义逻辑完全接管日期列的筛选
2. 多格式输入适配：针对用户可能的输入（空值、完整日期、年月、单独月份/年份）分别处理，通过日期对象精准匹配对应部分

完整修改代码 #

1. 调整列搜索事件绑定 #

$('.table-resize tfoot th').each(function(i) {
    if (headerLen - 1 != i) {
        var title = $('.table-resize thead th').eq(i).text();
        $(this).html(
            '<div class="form-group"><input class="form-control ' + (title ==
                'Date Sourced' ? 'ds_search' : '') + '" type="text" placeholder="' +
            title +
            '" data-index="' + i + '" /></div>');
    }
});

table = $('.table-resize').DataTable({
    scrollY: "500px",
    scrollX: true,
    scrollCollapse: true,
    scrollResize: true,
    pageResize: true,
    fixedColumns: {
        leftColumns: 5,
    },
    drawCallback: function(settings) {
        $('.table-loading-cont').removeClass('d-flex').css('display', 'none')
        $('.table-resize').removeClass('d-none')
        resizeTable()
    }
});

// 修改搜索事件处理：日期列禁用默认搜索，直接触发重绘
$(table.table().container()).on('keyup change', 'tfoot input', function() {
    var colIndex = $(this).data('index');
    if ($(this).hasClass('ds_search')) {
        // 日期列用自定义搜索，仅触发重绘
        table.draw();
    } else {
        // 其他列保留默认搜索逻辑
        table.column(colIndex).search(this.value).draw();
    }
});

2. 完善自定义搜索逻辑 #

DataTable.ext.search.push(function(settings, data, dataIndex) {
    var searchData = data[1]; // 替换为你的日期列索引
    var inputData = $('tfoot .ds_search').val().trim();

    // 空输入时显示所有行
    if (inputData === '') {
        return true;
    }

    // 解析行数据的日期（mm/dd/yyyy格式）
    var rowDateParts = searchData.split('/');
    if (rowDateParts.length !== 3) return false;
    var rowDate = new Date(parseInt(rowDateParts[2]), parseInt(rowDateParts[0]) - 1, parseInt(rowDateParts[1]));
    if (isNaN(rowDate.getTime())) return false;

    // 处理不同输入格式
    var inputParts = inputData.split('/');
    // 情况1：完整日期（mm/dd/yyyy）
    if (inputParts.length === 3) {
        var inputDate = new Date(parseInt(inputParts[2]), parseInt(inputParts[0]) - 1, parseInt(inputParts[1]));
        if (!isNaN(inputDate.getTime())) {
            return rowDate.getTime() === inputDate.getTime();
        }
    }
    // 情况2：年月（mm/yyyy）
    else if (inputParts.length === 2) {
        var inputMonth = parseInt(inputParts[0]);
        var inputYear = parseInt(inputParts[1]);
        if (!isNaN(inputMonth) && !isNaN(inputYear) && inputMonth >=1 && inputMonth <=12) {
            return (rowDate.getMonth() + 1) === inputMonth && rowDate.getFullYear() === inputYear;
        }
    }
    // 情况3：单独月份（两位数字，如03）
    else if (inputData.length === 2) {
        var inputMonth = parseInt(inputData);
        if (!isNaN(inputMonth) && inputMonth >=1 && inputMonth <=12) {
            return (rowDate.getMonth() + 1) === inputMonth;
        }
    }
    // 情况4：单独年份（四位数字，如2023）
    else if (inputData.length ===4) {
        var inputYear = parseInt(inputData);
        if (!isNaN(inputYear)) {
            return rowDate.getFullYear() === inputYear;
        }
    }

    // 不符合格式时不显示该行
    return false;
});

关键说明 #

• 直接将日期字符串转换为Date对象进行匹配，彻底避免字符串片段匹配的歧义
• 覆盖多种输入场景，用户可灵活输入空值、完整日期、年月、单独月份/年份
• 日期列禁用默认搜索，确保自定义逻辑完全生效

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