完整初始化columnDefs的多个子表的数据表

Question

背景：我有7个由PHP循环创建的数据表（HTML是直接在页面上创建的-并非源自AJAX或其他任何地方）。在这些摘要级别的DataTables中，我在嵌套循环中还有6个详细信息级别的DataTables（每个摘要级别的表一个，一个除外）。这些在每个汇总表的最后一列中，使用responsive选项，我能够按照https://datatables.net/examples/api/row_details.html

将明细表的内容推送到子行中

问题：：我试图在父表的initComplete: function(){}中初始化每个子表（详细信息）。尽管该表未保留任何DataTables库功能（例如，列定义宽度），但似乎仍在做一些事情。

我的主要问题是忽略了DataTable选项（在这种情况下，通过columnDefs设置宽度至关重要：

我想念什么吗？是否有理由选择覆盖/忽略我的列宽。父表允许responsive和columnDefs。

请参见示例：

$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2]
    },
    {
      "className": "dt-center",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable({
        paging: false,
        autoWidth: false,
        searching: false,
        columnDefs: [
          //IGNORED????
          {
            'width': '10%',
            'targets': [0]
          },
          {
            'width': '25%',
            'targets': [1]
          },
          {
            'width': '25%',
            'targets': [2]
          },
          {
            'width': '40%',
            'targets': [3]
          },
          {
            "className": "dt-center",
            "targets": "_all"
          },
        ],
        ordering: true,
        sorting: true,
        initComplete: function() {
          console.log("SUB TABLE INIT COMPLETE");
        },
        responsive: true,
        dom: '<"clear">rt',
        order: [
          [1, 'asc']
        ]
      });
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Heading one</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Heading one</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您要查找的内容默认不是数据表的一部分，但是您可以通过为类dtr-details和compact添加最大宽度来破解它>

$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2, 3]
    },
    {
      "className": "dt-center",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable();
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});

.dtr-details,
.compact {
  width: 100%!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Heading one</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Heading one</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

还要注意，我将您的'targets': [1, 2]更改为'targets': [1, 2, 3]，并且在子数据表中您不需要任何选项，因为它们不会被考虑在内。

如果您向内部表添加一个ID，例如innerTable，则可以仅添加此CSS以使第一列的宽度为3％：

#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
  width: 3%!important;
}

$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2, 3]
    },
    {
      "className": "dt-left",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable();
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});

.dtr-details,
.compact {
  width: 100% !important;
}

#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
  width: 3% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table id="innerTable" class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Id</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JSFiddle：https://jsfiddle.net/6fp3kbnh/