两个自定义combo boxes实现DataTables多条件过滤的开发问题

问题修复方案 #

核心问题 #

1. 原代码未将DataTables初始化的实例赋值给table变量，后续下拉监听事件中调用的table为未定义变量，导致筛选逻辑无法执行
2. 原代码调用列搜索时使用了复数columns()方法，正确应为单数column()指定单列搜索

修正后的完整JavaScript代码 #

HTML部分无需修改，直接替换原有JavaScript代码即可：

$(document).ready(function() {
    // 初始化表格并将实例赋值给table变量
    var table = $('#example').DataTable( {
        dom: 'Qlfrtip'
    });

    // 职位下拉筛选
    $('#dropdown1').on('change', function () {
        table.column(1).search(this.value).draw();
    });

    // 办公地点下拉筛选
    $('#dropdown2').on('change', function () {
        table.column(2).search(this.value).draw();
    });
});

效果说明 #

修改后两个下拉框的筛选条件会自动叠加，可实现例如「选择职位为Project Manager + 办公地点为London」的联合过滤效果，完全符合业务需求。

可选优化（精确匹配） #

如果需要避免模糊匹配误差，比如避免Data Manager被Manager关键词错误匹配，可以将搜索逻辑调整为正则精确匹配：

$('#dropdown1').on('change', function () {
    // 正则精确匹配，大小写不敏感
    table.column(1).search( this.value ? '^' + this.value + '$' : '', true, false ).draw();
});

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