MVC中Datatable下拉筛选与UIHints冲突的解决咨询

我完全懂你遇到的麻烦——当你用UIHints把状态的数字值转换成了友好的文本（比如Not Set、Created），DataTables依然在读取原始的单元格绑定数据（也就是那些0、1、2、3的数字）来生成下拉选项，这就导致下拉里的选项和页面显示的内容对不上，筛选自然就失效了。下面给你两种靠谱的解决方案：

方案一：利用HTML数据属性指定筛选值（推荐，不改动JS） #

修改你的Status.cshtml模板，给显示的元素加上data-search和data-order属性，让DataTables优先使用这些属性的值来做筛选和排序，而不是原始的Model值：

@model short?
@{
    string displayText = Model switch
    {
        0 => "Not Set",
        1 => "Created",
        2 => "Approved",
        3 => "Done",
        _ => ""
    };
}
<b data-search="@displayText" data-order="@displayText">@displayText</b>

这样一来，DataTables在读取列数据时，会自动识别data-search属性的值，下拉选项会显示和页面一致的文本，筛选也能精准匹配显示内容。

方案二：在DataTables中自定义列渲染逻辑 #

如果你不想改动UIHint模板，可以在JS初始化DataTables的时候，给status列添加自定义渲染函数，明确指定显示文本和筛选用的值：

修改datatable.js的代码：

$(document).ready(function () {
    $('#db_table').DataTable({
        ordering: false,
        paging: false,
        lengthChange: false,
        // 自定义列的处理逻辑
        columns: [
            null, // month列使用默认处理
            null, // year列使用默认处理
            null, // country列使用默认处理
            {
                render: function (data, type, row) {
                    // data是原始的short类型状态值
                    let displayText = "";
                    switch (data) {
                        case 0: displayText = "Not Set"; break;
                        case 1: displayText = "Created"; break;
                        case 2: displayText = "Approved"; break;
                        case 3: displayText = "Done"; break;
                    }
                    // 当用于显示或筛选时，返回格式化后的文本
                    if (type === 'display' || type === 'filter') {
                        return `<b>${displayText}</b>`;
                    }
                    // 其他场景（如内部排序）返回原始数据
                    return data;
                }
            }
        ],
        initComplete: function () {
            this.api().columns(3).every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.header()))
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                    });
                // 现在column.data()拿到的是筛选用的文本值，下拉选项会正确显示
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
});

额外小提示 #

你的视图里循环从i=1开始会跳过第一条数据哦，记得改成i=0：

@for (var i = 0; i < Model.Count(); i++) {
    <!-- 你的表格行代码 -->
}

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