DataTables 初始化多個子表，columnDefs 完好無損

Question

背景：我有 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>

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/