如何使此表具有可扩展的行以在扩展时显示其他行？

Question

我有一个 HTML 格式的数据表，我用来自 PHP 的动态数据进行填充。每行都是可扩展的，但我想要的是每个父行都有子行。因此，例如，有一个编号为 4 的设备类型包含 20 个不同的设备，所以我想在父行中显示设备编号 4，当我展开该行时显示 20 个设备（带有 IMEI、序列号等标题.等）

这是我现在的桌子：

See screenshot of my table

编辑：添加当前表（无子行）

 <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
            <thead>
                <th>Device</th>
                <th>Dev.no</th>
                <th>Barcode</th>
                <th>IMEI</th>                    
                <th>Serial no.</th>
                <th>Date added on stock</th>
            </thead>

            <tbody>

                <?php if (!empty($devices)) { ?>
                    <?php foreach ($devices as $device) : ?>
                        <tr>
                            <td>
                                <?php echo $device["name"] ?>
                            </td>

                            <td>
                                <?php echo $device["device_no"] ?>
                            </td>

                            <td>
                                <?php echo $device["barcode"] ?>
                            </td>

                            <td>
                                <?php echo $device["serial_imei"] ?>
                            </td>

                            <td>
                                <?php echo $device["serial_no"] ?>
                            </td>

                            <td>
                                <?php echo $device["created_date"] ?>
                            </td>

                        </tr>
                    <?php endforeach; ?>
                <?php } ?>
                </br>
            </tbody>
        </table>

Answer 1

我认为您正在寻找类似https://datatables.net/reference/api/row().child() 的东西。 然后您可以在子行中添加一个包含更多信息的表格。

注意：您似乎启用了响应式选项（隐藏/显示隐藏列的绿色加号按钮）。如果您打开了一个子行并尝试显示隐藏的列，它可能会覆盖您的子行。

编辑： 您需要指定要放入子级的 HTML。当我想显示孩子时，我会亲自使用 ajax 来检索它们。否则数据需要隐藏在页面的某处。

我创建了一个codepen，将HTML 放在行的数据属性中。然后您可以单击一个按钮来查看子行（设备）。显然，还有很多其他方法可以将数据存储在页面上。

$(document).on("click", ".viewChildren", rowClickHandler);

$("#example").DataTable();

function rowClickHandler() {
  var btn = $(this);
  var tr = btn.closest('tr');
  var dtRow = $("#example").DataTable().row(tr);
  if (dtRow.child.isShown()) {
    dtRow.child.hide();
    btn.text('Show Children');
  } else {
    var children = tr.data("children");
    dtRow.child(children).show();
    btn.text('Hide Children');
  }
}

th{
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
 <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
   <thead>
     <tr>
       <th>Device</th>
       <th>Dev.no</th>
       <th>Action</th>
     </tr>
   </thead>
   <tbody>
     <tr data-children='<table>
  <thead>
    <tr>
      <th>barcode</th>
      <th>imei</th>
      <th>serial_no</th>
      <th>created_date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>11324</td>
      <td>654654</td>
      <td>2020-01-17</td>
    </tr>
    <tr>
      <td>1234987</td>
      <td>1654</td>
      <td>654687</td>
      <td>2020-04-30</td>
    </tr>
  </tbody>
</table>'>
       <td>Laptop</td>
       <td>2</td>
       <td><button class = 'viewChildren'>See Children</button></td>
     </tr>
   </tbody>
 </table>