ASP.NET Core MVC中jQuery DataTables列筛选功能失效修复问询

前端Index.cshtml中performFilter函数修复 #

调整函数逻辑，确保正确收集筛选值、配置搜索规则并触发表格重绘：

function performFilter(columnIndex) {
    // 收集当前列选中的筛选值
    var selectedValues = [];
    $('#filterMenu-' + columnIndex + ' input[type="checkbox"]:checked').each(function() {
        selectedValues.push($(this).val());
    });

    var table = $('#doorTable').DataTable();
    // 构造多值匹配的正则表达式，空值则清空筛选
    var searchRule = selectedValues.length > 0 ? '^(' + selectedValues.join('|') + ')$' : '';
    
    // 应用列筛选并触发表格重绘
    table.column(columnIndex)
        .search(searchRule, true, false) // true启用正则匹配，false关闭智能拆分
        .draw();
}

关键修正点 #

• 确保选中值被完整收集为数组，避免遗漏或格式错误
• 使用正则表达式实现多值精确匹配（若需模糊匹配可移除^和$）
• 必须调用draw()方法，否则表格不会重新渲染筛选结果
• 若筛选菜单为动态生成，需用事件委托绑定复选框点击事件（如$(document).on('change', '#filterMenu-xxx input', ...)）

后端LoadDoors方法适配 #

解析DataTables传递的列筛选参数，将其应用到数据库查询中：

public IActionResult LoadDoors()
{
    // 读取DataTables请求参数
    var draw = int.Parse(Request.Query["draw"]);
    var start = int.Parse(Request.Query["start"]);
    var length = int.Parse(Request.Query["length"]);

    var query = _context.DoorDetails.AsQueryable();

    // 遍历处理每一列的筛选条件
    for (int i = 0; i < Request.Query["columns"].Count(); i++)
    {
        var columnSearchVal = Request.Query[$"columns[{i}][search][value]"].FirstOrDefault();
        if (!string.IsNullOrEmpty(columnSearchVal))
        {
            // 解析前端传入的正则字符串，提取筛选值数组
            var filterValues = columnSearchVal.Trim('^', '$').Split('|');
            // 根据列索引匹配模型字段，按需调整字段对应关系
            switch (i)
            {
                case 0:
                    query = query.Where(d => filterValues.Contains(d.DoorName));
                    break;
                case 1:
                    query = query.Where(d => filterValues.Contains(d.Status));
                    break;
                // 其他列的筛选逻辑依次添加
            }
        }
    }

    // 分页与统计
    var totalCount = query.Count();
    var data = query.Skip(start).Take(length).ToList();

    // 返回DataTables要求的JSON格式
    return Json(new {
        draw = draw,
        recordsTotal = totalCount,
        recordsFiltered = totalCount,
        data = data
    });
}

后端注意事项 #

• 严格对应列索引与DoorDetails模型的字段，避免筛选条件绑定错误
• 若数据量较大，建议为筛选字段添加数据库索引优化查询性能
• 如需支持全局搜索，可添加对应逻辑（参考注释部分）

模型与前端列配置验证 #

确保DoorDetails模型属性与前端DataTables的columns.data配置一致：

public class DoorDetails
{
    public int Id { get; set; }
    public string DoorName { get; set; }
    public string Status { get; set; }
    // 其他业务属性...
}

前端表格列配置示例：

$('#doorTable').DataTable({
    ajax: { url: '/DOOR_MANAGEMENT/LoadDoors', type: 'GET' },
    columns: [
        { data: 'DoorName' },
        { data: 'Status' },
        // 其他列配置...
    ]
});

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