javascript - DataTables 初始化多个子表且 columnDefs 完整

问题描述

背景：我有 7 个由 PHP 循环创建的数据表（HTML 是直接在页面上创建的 - 不是来自 AJAX 或其他任何地方）。在这些汇总级别的数据表中，我在嵌套循环中有另外 6 个详细级别的数据表（每个汇总级别表一个 - 除了一个之外）。这些在每个汇总表的最后一列中，使用该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>

标签： javascriptjqueryhtmlcssdatatables

解决方案

默认情况下，您要做的不是数据表的一部分，但是您可以通过为类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/

javascript - DataTables 初始化多个子表且 columnDefs 完整

问题描述

解决方案

推荐阅读