ASP.NET Core 6 MVC中点击按钮时通过AJAX在jQuery DataTable加载并显示数据的实现问题

嘿，刚上手在ASP.NET Core 6 MVC里用AJAX结合jQuery DataTables确实容易懵，我来帮你把这个点击按钮加载数据的流程理清楚，顺便补全关键代码~

先理清楚你现有的代码结构 #

视图（View）已有的代码片段 #

<div>
    <div style="padding-top: 20px; padding-bottom:20px">
            <button class="btn btn-lg btn-primary" onclick="javascript:runReport();">Run 
                 Report</button>
    </div>
    <div>
        <table class="table table-bordered table-striped" id="riskReport">
            <thead class="bg-dark text-white">
                <tr>
                    <th>CustomerNumber</th>
                    <th>CustomerStatus</th>
                    <th>StartYear</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

你已经搭好了表格的基本结构和触发按钮，接下来就是补全控制器的后台接口和前端的runReport函数实现。

控制器（Controller）后台接口实现 #

你需要在对应的控制器里写一个返回JSON数据的GET接口，用来提供表格需要的数据。这里假设你的控制器叫RiskReportController，代码示例如下：

public class RiskReportController : Controller
{
    // 这里替换成你实际的数据源，比如数据库上下文
    private readonly YourDbContext _dbContext;

    public RiskReportController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpGet]
    public IActionResult GetRiskReportData()
    {
        // 替换成你实际的数据查询逻辑，这里只是示例
        var reportData = _dbContext.CustomerRisks
            .Select(c => new
            {
                CustomerNumber = c.CustomerNumber,
                CustomerStatus = c.CustomerStatus,
                StartYear = c.StartYear
            })
            .ToList();

        // 注意：DataTables默认期望返回的JSON包含一个名为data的字段，所以这里包装一下
        return Json(new { data = reportData });
    }
}

前端关键的JS逻辑实现 #

你需要在视图里确保已经引入了jQuery和DataTables的JS、CSS文件（这个应该已经加了吧？要是没加的话记得补上，顺序要对：先引jQuery，再引DataTables的JS和CSS），然后实现runReport函数，这里给你两种常用的实现方式：

方式一：每次点击按钮重建DataTable实例 #

这种方式适合简单场景，每次点击都重新初始化表格：

function runReport() {
    // 先销毁已存在的表格实例，避免重复初始化报错
    if ($.fn.DataTable.isDataTable('#riskReport')) {
        $('#riskReport').DataTable().destroy();
    }

    // 初始化DataTable并通过AJAX拉取数据
    $('#riskReport').DataTable({
        ajax: {
            url: "/RiskReport/GetRiskReportData", // 这里替换成你实际的控制器路由，比如如果是Home控制器就是/Home/GetRiskReportData
            type: "GET",
            dataType: "json"
        },
        columns: [
            { data: "CustomerNumber" },
            { data: "CustomerStatus" },
            { data: "StartYear" }
        ],
        responsive: true, // 可选：让表格适配移动端
        autoWidth: false, // 禁用自动宽度，避免列宽混乱
        order: [[0, "asc"]] // 可选：默认按CustomerNumber升序排序
    });
}

方式二：初始化一次表格，点击按钮仅刷新数据 #

这种方式体验更流畅，不会每次都重建表格，适合频繁触发的场景：

// 全局保存表格实例，方便后续操作
let riskReportTable;

// 页面加载完成后先初始化空表格
$(document).ready(function() {
    riskReportTable = $('#riskReport').DataTable({
        columns: [
            { data: "CustomerNumber" },
            { data: "CustomerStatus" },
            { data: "StartYear" }
        ],
        responsive: true,
        autoWidth: false
    });
});

function runReport() {
    // 发起AJAX请求获取数据
    $.ajax({
        url: "/RiskReport/GetRiskReportData",
        type: "GET",
        dataType: "json",
        success: function(response) {
            // 清空表格现有数据
            riskReportTable.clear();
            // 添加新数据并重新绘制表格
            riskReportTable.rows.add(response.data).draw();
        },
        error: function(xhr, status, error) {
            console.error("加载数据失败：" + error);
            alert("加载数据出错啦，请稍后重试~");
        }
    });
}

常见问题排查小技巧 #

• 检查路由是否正确：比如控制器的路由前缀、Action名称有没有写错，可以在浏览器F12的网络面板里看AJAX请求的地址返回是不是200
• 确认数据格式：控制器返回的JSON必须包含data字段，不然DataTables识别不了
• 依赖文件是否引入正确：要是控制台报$ is not defined就是jQuery没引对，报DataTable is not a function就是DataTables的JS没引对
• 看控制台错误：点击按钮没反应的话，按F12打开浏览器控制台，看看有没有JS报错或者AJAX请求失败的信息，这是排查问题最快的方式

备注：内容来源于stack exchange，提问作者Massey