如何对内部嵌套链接元素的jQuery Datatable列实现筛选功能

问题原因 #

生成下拉框选项时仅提取了列内容的纯文本，但DataTable默认搜索的是单元格的原始HTML内容，代码中使用了^val$格式的精确正则匹配，纯文本无法匹配包含<a>标签的完整HTML字符串，因此返回0行结果。

修复方案 #

方案1：配置搜索数据源为纯文本（推荐） #

在DataTable初始化配置中新增columnDefs规则，指定搜索时自动提取列内容的纯文本，原有其他逻辑无需修改：

$('.mytable').DataTable({
    "aLengthMenu":[[5,10,25,50,100,-1],[5,10,25,50,100,"All"]],
    "iDisplayLength":5,
    // 新增列配置
    "columnDefs": [{
        "targets": "_all",
        "render": function(data, type, row) {
            if(type === 'filter') {
                // 搜索时返回纯文本内容
                return $('<div/>').html(data).text().trim();
            }
            return data;
        }
    }],
    "initComplete": function () {
        // 原有initComplete代码保持不变
    }
});

方案2：调整搜索匹配规则 #

如果不需要严格的精确匹配，可移除搜索逻辑中的行首^、行尾$限制，改成模糊匹配即可生效：

// 原搜索代码
column.search( val ? '^'+val+'$' : '', true, false )
// 修改为
column.search( val, false, false )

该方案的缺点是存在文本包含关系时会出现误匹配，比如筛选"王"时会同时返回"王军"、"王磊"等相关内容。

内容的提问来源于stack exchange，提问作者Vahida Vadiya