How to make this table with expandable rows to display other rows when expanded?

问题

I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)

Here is the table I have right now:

See screenshot of my table

EDIT: Added current table (no child rows)

 <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>

回答1:

I think you're looking for something like this https://datatables.net/reference/api/row().child(). Then you can add a table in the child row with more information.

Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.

Edit: You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.

I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.

$(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>

来源：https://stackoverflow.com/questions/61502339/how-to-make-this-table-with-expandable-rows-to-display-other-rows-when-expanded