使用Ajax加载数据至DataTable表格失败问题求助

问题场景 #

使用Ajax向DataTable加载数据时，表格列宽正常渲染，但无数据加载。尝试官方文档提供的多种Ajax写法后问题仍存在，表格仅显示空框架。

前端代码 #

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        ajax: {
            url: '/admin/product/GetAll'
        },
        columns: [
            { data: 'title', width: "25%" },
            { data: 'category.name', width: "15%" },
            { data: 'isbn', width: "15%" },
            { data: 'author', width: "15%" },
            { data: 'listPrice', width: "15%" }
        ]
    });
}

效果截图 #

排查与解决步骤 #

• 核对后端返回的数据格式
  DataTable默认要求后端返回的JSON结构必须包含data顶级字段，示例格式如下：

  {
    "data": [
      {
        "title": "测试产品",
        "category": {"name": "电子产品"},
        "isbn": "9781234567890",
        "author": "测试作者",
        "listPrice": 59.99
      }
    ]
  }
  

  如果后端直接返回数组（而非包裹在data字段中的对象），需要在Ajax配置里指定dataSrc为空字符串：

  ajax: {
      url: '/admin/product/GetAll',
      dataSrc: ''
  }
  

• 检查浏览器控制台错误信息
  按F12打开开发者工具，切换到Console标签，查看是否存在404（接口路径错误）、500（后端服务报错）、跨域或JavaScript语法错误。这类错误会直接阻断数据加载流程。

• 验证接口实际返回内容
  在浏览器地址栏直接访问/admin/product/GetAll，或用接口测试工具请求，确认接口能正常返回JSON数据，且字段名与前端columns配置的data属性完全匹配（注意大小写敏感）。比如category.name要求每条数据的category必须是包含name字段的对象，不能是字符串或null。

• 确认DataTable依赖加载正确
  检查页面是否按顺序引入了jQuery、DataTable的JS和CSS文件——必须先加载jQuery，再加载DataTable的资源，缺失依赖会导致表格功能异常。

• 排查跨域问题（前后端分离场景）
  如果前端与后端部署在不同域名下，需要后端配置CORS跨域允许规则，或前端通过代理转发请求。浏览器控制台会明确提示跨域相关错误，根据提示调整即可。

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