MVC中通过Ajax加载数据到DataTable遇列显示异常问题排查

我帮你定位到了两个核心问题，正是它们导致了DataTable列显示null和报错的情况：

1. Controller中手动序列化导致响应格式错误 #

你在Action里手动用JavaScriptSerializer序列化了列表，然后把这个序列化后的字符串传给Json()方法。这会让MVC的JsonResult再把这个字符串转一次JSON，最终前端拿到的是一个字符串类型的响应，而不是预期的JSON数组。

DataTable拿到这个字符串后，因为你设置了dataSrc: ""，它会把字符串当成数组来解析——也就是把字符串拆成单个字符的数组，每个字符对应一行数据。这就解释了为什么第一列显示单个字符，其他列找不到对应参数而显示null，还会弹出"Requested Unknown parameter '1'..."的错误。

修正后的Controller代码 #

去掉手动序列化，直接把对象列表传给Json()方法，MVC会自动帮你完成正确的序列化：

public JsonResult GetVoters() {
    List<vt> stud = (from student in _context.Voters
                    select new vt {
                        StudentNumber = student.StudentNumber,
                        Name = student.Name,
                        Faculty = student.Faculty,
                        Department = student.Department,
                        Program = student.Program,
                        Code = student.Code
                    }).Take(100).ToList();
    
    // 直接返回对象列表，无需手动序列化
    return Json(stud, JsonRequestBehavior.AllowGet);
}

2. DataTable配置中列选项的大小写错误 #

你的View代码里用了Columns（首字母大写），但DataTable的配置选项是区分大小写的，正确的选项名应该是小写的columns。大写的Columns不会被DataTable识别，导致列映射配置无效。

修正后的View代码 #

把Columns改成columns：

$(document).ready(function () {
    $("#codetable").DataTable({
        processing: true,
        serverSide: true,
        info: true,
        ajax: {
            url: '@Url.Action("GetVoters", "Index")',
            dataSrc: ""
        },
        // 改为小写的columns
        columns: [
            { "data": "StudentNumber" },
            { "data": "Name" },
            { "data": "Faculty" },
            { "data": "Department" },
            { "data": "Program" },
            { "data": "Code" }
        ]
    });
});

调试建议 #

修改完成后，你可以用浏览器的开发者工具（F12）打开「网络」标签，查看请求GetVoters的响应内容：

• 正确的响应应该是一个JSON数组，格式类似[{"StudentNumber":"xxx", "Name":"xxx", ...}, ...]
• 如果还是有问题，检查响应的字段名是否和DataTablecolumns里的data值完全匹配（包括大小写）

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