ASP.NET Core中DataTables添加行嵌套表格及参数错误解决问询

1. 修复DataTables参数错误（核心） #

这个错误的本质是你传入的newRow数据结构与DataTables初始化时的列配置不匹配，针对不同的列定义方式，修复方法如下：

情况1：列定义使用columns.data指定字段名 #

如果你的DataTables初始化代码是通过data绑定字段的：

$('#add-room').DataTable({
  columns: [
    { data: 'Id' },
    { data: 'Name' },
    { data: 'RoomNumber' }
  ]
});

那么newRow必须是对象格式，键名需与columns.data的取值完全一致：

const newRow = {
  Id: 1,
  Name: '测试用户',
  RoomNumber: '301'
};
table.row.add(newRow).draw(false);

禁止混用数组格式传入，否则DataTables会按索引查找参数，触发找不到'1'的错误。

情况2：列定义依赖数组索引匹配 #

如果初始化时未指定columns.data，仅靠列顺序匹配数据：

$('#add-room').DataTable({
  columns: [
    { title: 'ID' },
    { title: '姓名' },
    { title: '房间号' }
  ]
});

那么newRow必须是数组格式，顺序需与列定义完全对应：

const newRow = [1, '测试用户', '301'];
table.row.add(newRow).draw(false);

2. 解决嵌套表格问题 #

嵌套表格通常由以下两种原因导致，对应修复方式：

• 视图本身包含多余表格标签：检查UserInformation.cshtml，确保目标DataTables容器（<table id="add-room"></table>）是独立的，视图内没有未闭合的<table>标签，也不要将整个视图的HTML直接插入已有表格的容器中。
• 新增行包含表格HTML：如果newRow的单元格内容里嵌套了<table>标签，会导致表格嵌套。确保每个单元格内容为纯文本或非表格类HTML（如按钮、span等），若确实需要嵌套表格，需单独配置DataTables的单元格渲染逻辑。

3. 额外验证步骤 #

• 打开浏览器控制台，打印newRow的结构，确认其与列定义完全匹配：

  console.log(newRow);
  

• 避免重复初始化表格：Ajax加载视图后，先判断表格是否已初始化，防止多实例冲突：

  let table;
  if (!$.fn.dataTable.isDataTable('#add-room')) {
    table = $('#add-room').DataTable({
      // 初始化配置
    });
  } else {
    table = $('#add-room').DataTable();
  }
  

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