DataTables返回982条空白行及‘Requested unknown parameter 'Key' for row 0, column 0’错误排查求助

我一眼就揪出了核心问题，咱们一步步梳理解决：

1. 致命错误：dataSrc指向了不存在的字段 #

你控制台里的AJAX返回数据结构是{ "data": [ {...}, {...}, ... ] }，但你的DataTables配置里，dataSrc函数返回的是data.d——可你的返回数据里根本没有d这个字段啊！这直接导致DataTables拿不到有效数据数组，自然找不到Key参数，进而渲染出大量空白行（大概率是后端返回的总记录数是982，但实际数据为空，所以用空行填充）。

修正方法：把dataSrc改成返回data.data：

dataSrc: function (data) {
  console.log(data.data); // 现在能正确打印出数据数组了
  return data.data;
}

2. 配置项位置错误：success和error要放在ajax内部 #

你当前把success和error放在了DataTables的顶层配置里，但这两个回调是ajax配置的子项，放在顶层完全不会生效。需要把它们移到ajax对象中：

ajax: {
  url: pageUrl,
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  dataType: "json",
  dataSrc: function (data) {
    console.log(data.data);
    return data.data;
  },
  success: fnsuccesscallback, // 移到此处
  error: fnerrorcallback      // 移到此处
},

3. 可选优化：columnDefs宽度匹配问题 #

你的columns定义了8列，但columnDefs里只设置了前6列的宽度（targets 0-5），如果需要布局更合理，建议补上剩余列的宽度设置：

"columnDefs": [
  { "width": "10%", "targets": 0 }, // Key列不需要50%宽度，调整后更合理
  { "width": "35%", "targets": 1 }, // Summary列内容多，占比大更合适
  { "width": "10%", "targets": 2 },
  { "width": "10%", "targets": 3 },
  { "width": "10%", "targets": 4 },
  { "width": "10%", "targets": 5 },
  { "width": "7.5%", "targets": 6 },
  { "width": "7.5%", "targets": 7 }
],

修正后的完整配置 #

var table = $('#example').DataTable({
  ajax: {
    url: pageUrl,
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    dataType: "json",
    dataSrc: function (data) {
      console.log(data.data);
      return data.data;
    },
    success: fnsuccesscallback,
    error: fnerrorcallback
  },
  "pageLength": 50,
  fixedHeader: true,
  responsive: true,
  "columns": [
    { "data": "Key" },
    { "data": "Summary" },
    { "data": "Created" },
    { "data": "Updated" },
    { "data": "Status" },
    { "data": "Priority" },
    { "data": "reporter" },
    { "data": "Assignee" }
  ],
  autoWidth: false,
  "columnDefs": [
    { "width": "10%", "targets": 0 },
    { "width": "35%", "targets": 1 },
    { "width": "10%", "targets": 2 },
    { "width": "10%", "targets": 3 },
    { "width": "10%", "targets": 4 },
    { "width": "10%", "targets": 5 },
    { "width": "7.5%", "targets": 6 },
    { "width": "7.5%", "targets": 7 }
  ],
  "order": [[1, 'asc']]
});
function fnsuccesscallback(data) {
  alert(data.data); // 这里同步改成data.data，匹配返回结构
}
function fnerrorcallback(result) {
  alert(result.statusText);
}

按这个配置修改后，应该就能正常渲染数据，不会再出现空白行和参数错误提示了。

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