如何解决ASP.NET Core MVC中DataTables Ajax取数后表格无显示问题

一、解决DataTables表格未渲染内容的问题 #

1. 修正控制器返回的JSON格式 #

根据DataTables的运行模式，调整返回结构：

客户端模式（前端处理分页/排序）

直接返回实体列表即可，无需额外包装：

public IActionResult GetList()
{
    var cusAccounts = _context.Cusaccounts.ToList();
    return Json(cusAccounts);
}

服务器端模式（后端处理分页/排序/搜索）

必须返回DataTables要求的标准结构（包含draw/recordsTotal/recordsFiltered/data字段）：

public IActionResult GetList(int draw, int start, int length)
{
    var totalCount = _context.Cusaccounts.Count();
    var filteredData = _context.Cusaccounts.Skip(start).Take(length).ToList();
    
    return Json(new {
        draw = draw,
        recordsTotal = totalCount,
        recordsFiltered = totalCount, // 有搜索逻辑时改为过滤后的数量
        data = filteredData
    });
}

2. 前端DataTables初始化代码修正 #

客户端模式示例

$(document).ready(function() {
    $('#cusAccountTable').DataTable({
        ajax: {
            url: '/YourController/GetList', // 替换为你的控制器路由
            type: 'GET',
            dataSrc: '' // 返回的是纯数组，无需解析嵌套的data字段
        },
        columns: [
            { data: 'Id' }, // 必须和Cusaccount类的属性名完全一致（大小写敏感）
            { data: 'AccountName' },
            { data: 'Email' },
            // 其他列对应你的实体属性
        ],
        paging: true,
        ordering: true,
        searching: true
    });
});

服务器端模式示例

$(document).ready(function() {
    $('#cusAccountTable').DataTable({
        serverSide: true, // 开启服务器端处理
        ajax: {
            url: '/YourController/GetList',
            type: 'GET'
        },
        columns: [
            { data: 'Id' },
            { data: 'AccountName' },
            { data: 'Email' }
        ]
    });
});

常见排查点 #

• 打开浏览器控制台，检查是否有JS报错（比如字段名不匹配、路由错误）
• 用F12网络面板查看Ajax请求的响应，确认返回的JSON是否包含有效数据
• 确保列配置的data值和Cusaccount实体的public属性名完全一致（比如C#的AccountName，前端必须写'AccountName'）

二、解决DataTables向控制器传递字符串参数的问题 #

方法1：自定义参数传递 #

在Ajax请求中添加自定义参数，比如传递搜索关键词：

$('#cusAccountTable').DataTable({
    ajax: {
        url: '/YourController/GetList',
        type: 'GET',
        data: function(d) {
            // 追加自定义参数，d包含DataTables自带的draw/start等参数
            d.searchKeyword = $('#searchInput').val();
        },
        dataSrc: '' // 客户端模式需要，服务器端模式可省略
    },
    columns: [/* 列配置 */]
});

控制器接收参数：

public IActionResult GetList(string searchKeyword)
{
    var query = _context.Cusaccounts.AsQueryable();
    if (!string.IsNullOrEmpty(searchKeyword))
    {
        query = query.Where(c => c.AccountName.Contains(searchKeyword));
    }
    return Json(query.ToList());
}

方法2：结合DataTables自带搜索框 #

DataTables自带搜索框会自动传递search[value]参数，控制器可通过类接收：

public IActionResult GetList(int draw, int start, int length, [FromQuery]SearchParam search)
{
    var query = _context.Cusaccounts.AsQueryable();
    if (!string.IsNullOrEmpty(search.Value))
    {
        query = query.Where(c => c.AccountName.Contains(search.Value));
    }
    var totalCount = query.Count();
    var data = query.Skip(start).Take(length).ToList();
    
    return Json(new {
        draw = draw,
        recordsTotal = totalCount,
        recordsFiltered = totalCount,
        data = data
    });
}

// 定义接收搜索参数的类
public class SearchParam
{
    public string Value { get; set; }
}

关键注意事项 #

• 确认控制器路由正确，若使用区域/路由前缀，需同步调整Ajax的url
• 若前后端跨域，需在ASP.NET Core中配置CORS策略
• 确保Cusaccount类的属性为public，否则JSON序列化无法读取值

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