如何从AJAX调用返回有效数据至DataTables子表并解决参数未知报错

修复方案 #

• 避免重复初始化子表实例
  你当前每次点击父表行都会重新初始化ID为child的DataTable，重复初始化会触发参数匹配错误。需要先判断实例是否存在，存在的话直接更新数据而非重新初始化。
• 移除无效的ajax.reload()调用
  你初始化子表时用的是data参数直接传入数组，没有配置ajax数据源，调用ajax.reload()会找不到对应数据源触发报错。
• 列配置显式绑定数组索引
  报错提示找不到行0列1的参数，是因为DataTables无法自动匹配数组数据源和列的对应关系，需要在列配置里显式指定每列对应的数组下标。
• 显式指定接口返回格式
  指定jQuery.get的返回格式为json，避免返回字符串格式的JSON无法被DataTables识别。

修正后代码 #

// 子表实例定义在外部作用域，避免重复初始化
let childTable = null;

jQuery('#parent tbody').on( 'click', 'tr', function () {
  const drno = parentTable.row( this ).data()[4];
  // 显式指定返回格式为json
  jQuery.get("ajaxchild.php", {drno: drno}, function(dataset){ 
    // 子表已初始化直接更新数据
    if (childTable) {
      childTable.clear().rows.add(dataset).draw();
      return;
    }
    // 首次初始化子表
    childTable = $('#child').DataTable( {
      data: dataset,                                     
      columns: [
        { "title": "Reference", "data": 0 },
        { "title": "Our Ref.", "data": 1 },
        { "title": "Date", "data": 2 },
        { "title": "Value", "data": 3 },
        { "title": "Tax", "data": 4 }
      ]                                
    })
  }, 'json');
}); 

// 选中/取消选中父行时清空子表
parentTable.on( 'select deselect', function () {
  if (childTable) {
    childTable.clear().draw();
  }
});

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