多Bootstrap标签页下DataTables子行仅单个标签页打开问题求解

• 全局table变量被覆盖：原有代码用全局变量存储表格实例，初始化第二个表格时会覆盖第一个表格的实例，点击事件触发时永远操作最后创建的表格，导致跨标签页逻辑混乱。
• 容器节点共享：原有代码在初始化create_cont时仅创建一个DOM容器，同一个DOM节点无法同时挂载到两个表格的子行中，会出现节点被挪动的问题。
• 关闭子行的逻辑没有限定范围：原有逻辑会跨表格触发已打开子行的关闭事件，干扰另一个标签页的状态。

仅需要修改JS代码即可，CSS和HTML代码无需调整，修改后完整JS代码如下：

let json1 = [{"data": [{"id": "1","name": "Tiger Nixon","position": "System Architect","salary": "$320,800","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"id": "2","name": "Garrett Winters","position": "Accountant","salary": "$170,750","start_date": "2011/07/25","office": "Tokyo","extn": "8422"},{"id": "3","name": "Ashton Cox","position": "Junior Technical Author","salary": "$86,000","start_date": "2009/01/12","office": "San Francisco","extn": "1562"},{"id": "4","name": "Cedric Kelly","position": "Senior Javascript Developer","salary": "$433,060","start_date": "2012/03/29","office": "Edinburgh","extn": "6224"},{"id": "5","name": "Airi Satou","position": "Accountant","salary": "$162,700","start_date": "2008/11/28","office": "Tokyo","extn": "5407"}]}];
let json2 = [{"data": [{"id": "1","name": "Harry Potter","position": "System Architect","salary": "$234,800","start_date": "2013/04/25","office": "Edinburgh","extn": "5421"},{"id": "2","name": "Ron Weasley","position": "Accountant","salary": "$170,777","start_date": "2011/09/25","office": "Tokyo","extn": "8422"},{"id": "3","name": "Herminone Granger","position": "Junior Technical Author","salary": "$175,000","start_date": "2019/01/12","office": "San Francisco","extn": "1562"},{"id": "4","name": "Neville Logbottom","position": "Senior Javascript Developer","salary": "$555,060","start_date": "2015/03/29","office": "Edinburgh","extn": "6224"},{"id": "5","name": "Luna Lovegood","position": "Accountant","salary": "$200,700","start_date": "2017/11/28","office": "Tokyo","extn": "5407"}]}];

const create_datatable =(js, tab) => {
  js.forEach(d => {
    // 改为局部变量存储实例，不污染全局
    const table = $(`#${tab}`).DataTable({
      "bDestroy": true,
      "responsive": true,
      "autoWidth": false,
      "data": d.data,
      columns: [
        {
          className: 'details-control',
          orderable: false,
          data: null,
          defaultContent: '',
        },
        {data: 'name', className:'names'},
        {data: 'position', className:'position'},
        {data: 'office', className:'office'},
        {data: 'salary', className:'salary'}
      ]
    });
  });
}
create_datatable(json1, 'example');
create_datatable(json2, 'example2');

const create_cont = (tab) => {
  $(`#${tab} tbody`).on('click', 'td.details-control', function () {
    // 动态获取当前操作的表格实例
    const currentTable = new $.fn.dataTable.Api(`#${tab}`);
    const tr = $(this).closest('tr');
    const row = currentTable.row(tr);
    
    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // 仅关闭当前表格内的已展开子行
      if (currentTable.row('.shown').length ) {
        $('.details-control', currentTable.row('.shown').node()).click();
      }
      // 每次展开时新建容器，满足后续插入动态图表的需求
      const containers = document.createElement('div');
      containers.setAttribute("id", `${tab}_scatter`);
      containers.innerHTML = 'test';
      row.child(containers).show();
      tr.addClass('shown');
    }
  });
}
create_cont('example');
create_cont('example2');

修改后两个标签页的表格点击最左列都可正常打开显示“test”的子行，同一时间单个表格仅保留一个展开的子行，两个标签页的操作互不干扰，子行容器独立创建，后续可直接在容器内插入Echarts等动态图表。

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