如何将Axios调用多API经Promise.all返回的数据填充到对应标签页的DataTable中

实现方案 #

你需要先建立标签页ID和对应DataTable的映射关系，同时为每个不同表头的DataTable预定义列配置，再根据表是否已经初始化走对应的更新/初始化逻辑即可，具体改造步骤如下：

1. 预定义配置规则 #

因为每个DataTable的表头、ID均不相同，需要提前为每个标签页对应绑定table ID和列配置，列配置中的字段要和接口返回的业务字段一一对应。

2. 调整请求后的数据处理逻辑 #

拿到接口返回数据后，先判断目标DataTable是否已经初始化：

• 已初始化：清空原有数据，插入新数据后重绘
• 未初始化：传入数据和列配置完成首次初始化

3. 完整改造后代码示例 #

// 预定义各表的列配置，根据你实际表头修改，这里仅做示例
const tableColumns = {
  'second-tab': [
    {data: 'field1', title: '表头1'},
    {data: 'field2', title: '表头2'},
    // 补充second-tab下table的所有列配置
  ],
  'third-tab': [
    {data: 'fieldA', title: '列A'},
    {data: 'fieldB', title: '列B'},
    // 补充third-tab下table的所有列配置
  ],
  'fourth-tab': [
    // 补充fourth-tab下table的所有列配置
  ],
  'default': [
    // 补充默认标签页table的所有列配置
  ]
}

$('#myTab button').on('shown.bs.tab', function (e) {
  var tab = $(this).attr("id");
  // 补充你原有代码漏写的域名判断条件即可
  if (/* 域名已选择的判断逻辑 */) {
    switchtabs(tab);
    return true;
  } else {
    alert("Please select Domain Name");
    return false
  }
});

function switchtabs(tab){
  var url = '';
  let prm;
  let tableId; // 对应tab下dataTable的ID
  let columns;
  switch (tab) {
    case 'second-tab':
      url = link1;
      prm = {type:'sample1', fromdate:fromdate, todate:todate, descn:info}
      tableId = '#second-table' // 替换为second-tab下实际的table ID
      columns = tableColumns['second-tab']
      break;
    case 'third-tab':
      url = link2;
      prm = {type:'sample1', fromdate:fromdate, todate:todate, descn:info}
      tableId = '#third-table' // 替换为third-tab下实际的table ID
      columns = tableColumns['third-tab']
      break;
    case 'fourth-tab':
      url = link3;
      prm = {type:'sample1', fromdate:fromdate, todate:todate, descn:info}
      tableId = '#fourth-table' // 替换为fourth-tab下实际的table ID
      columns = tableColumns['fourth-tab']
      break;
    default: 
      url = link;
      prm = {type:'domainwise', fromdate:fromdate, todate:todate, descn:shop}
      tableId = '#default-table' // 替换为默认标签页下实际的table ID
      columns = tableColumns['default']
  }
  if(typeof url !== "undefined" && tableId){
    axios.post(url, prm).then(function(response){
      const table = $(tableId)
      // 假设接口返回的数据集放在response.data.list，可根据你实际返回结构调整
      const tableData = response.data.list || response.data
      // 判断table是否已经初始化DataTable
      if ($.fn.DataTable.isDataTable(tableId)) {
        // 已初始化，直接更新数据
        table.DataTable().clear().rows.add(tableData).draw()
      } else {
        // 未初始化，执行首次渲染
        table.DataTable({
          data: tableData,
          columns: columns,
          // 其他你需要的DataTable配置，比如分页、搜索开关等
          paging: true,
          searching: true
        })
      }
    }).catch(function(err){
      console.log(err);
    })
  }
}

注意事项 #

• 列配置中的data属性值要和接口返回的每条数据的字段名完全对应，title就是表头显示的文字
• 如果接口返回数据格式不符合DataTable要求，可以在拿到数据后先做一层格式转换再传入
• 确保每个tab下的table标签ID和你在switch中定义的tableId完全一致

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