.Net Core MVC项目DataTable含HTML标签列正则下拉筛选失效问题求助

问题根因 #

DataTable默认读取列的完整HTML内容作为数据值，生成下拉选项时将<span>标签一同存入option的value属性，搜索时匹配的是带HTML标签的转义字符串，和实际展示的纯文本不一致，因此无匹配结果。

修复方案 #

方案1：JS端处理（改动最小，无需修改后端代码） #

直接修改现有DataTable列筛选逻辑，生成下拉选项时提取HTML对应的纯文本，同时配置列渲染规则让DataTable搜索时默认取纯文本：

第一步：修改列筛选JS代码

this.api().columns([1,7]).every(function (index) {
    var column = this;
    var select = $('<select><option value=""></option></select>')
        .appendTo($('thead tr:eq(1) td').eq(this.index()))
        .on('change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
                $(this).val()
            );
            column
                .search(val ? '^' + val + '$' : '', true, false)
                .draw();
        });
    column.data().unique().sort().each(function (d, j) {
        // 核心修改：将HTML内容转为纯文本后再填充到下拉选项
        var pureText = $('<div>').html(d).text().trim();
        select.append(`<option value="${pureText}">${pureText}</option>`);
    });
});

第二步：添加DataTable列渲染配置

在表格初始化的配置中新增columnDefs规则，让对应列的搜索、排序都基于纯文本处理：

$('#你的表格ID').DataTable({
    // 保留所有原有配置，仅新增以下规则
    columnDefs: [
        { 
            targets: [1,7], 
            render: $.fn.dataTable.render.text() 
        }
    ]
});

方案2：Razor层添加数据属性（更规范，鲁棒性更高） #

如果后续可能修改列内的HTML结构，推荐该方案，从数据源层面隔离展示内容和筛选值：

第一步：修改Razor代码

给对应列的<td>标签添加自定义data属性存储纯文本的账户类型标识：

<td data-account-type="@item.AccountType">
    @{
        switch (item.AccountType)
        {
            case "OPT":
                <span>Just A User</span>
                break;        
            case "RSS":
                <span>ABC Admin</span>
                break;
            case "RA1":
                 <span>Primary - Primary</span>
                break;
        }
    }
</td>

第二步：修改DataTable列数据源配置

初始化表格时指定对应列直接读取data属性的值作为数据源，筛选、排序都会直接基于该值处理：

$('#你的表格ID').DataTable({
    // 保留所有原有配置，仅新增以下规则
    columnDefs: [
        {
            targets: [1,7],
            data: function (row, type, set, meta) {
                return $(meta.cell).data('account-type');
            }
        }
    ]
});

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