DataTables加载数据时提示请求未知参数nested_field_name错误怎么解决？

问题根源 #

报错的核心原因是前端DataTables列定义的字段名和后端接口返回的字段名不匹配：

• 后端返回的每条数据实际字段为nested_field（对应第一列内容）、subfields（对应第二列内容）
• 你前端列配置里写的字段是nested_field_name、nested_field_blacklist，DataTables找不到对应字段就会抛出"Requested unknown parameter"的错误。

修复方案 #

步骤1：修正列定义的data字段 #

修改columns_nested_field配置，把字段名和后端返回对应上，同时第二列是数组类型，需要加渲染逻辑转成可展示的字符串：

var columns_nested_field = [
    { "title":"Nested field", data: "nested_field"},
    { "title":"Subfields blacklist", data: "subfields", 
      // 把数组转成逗号分隔的字符串展示，可根据需求调整分隔符
      render: function(data) {
        return data ? data.join(', ') : ''
      }
    },
    { "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];

可选优化 #

如果不需要默认的弹窗告警，可在DataTables配置里新增错误处理逻辑，关闭自带弹窗：

NestedFieldTable = $('#NestedFieldTable').DataTable({
    // 原有所有配置保留，新增下面的配置项
    "error": function (settings, techNote, message) {
        console.log('DataTables错误：', message);
        // 可自行替换为自定义的页面提示逻辑
    }
});

修改完成后刷新页面即可正常渲染数据，新增数据后调用ajax.reload()也会正常展示。

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