本文介绍了如何使此表具有可扩展的行以在扩展时显示其他行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我有一个HTML数据表,其中填充了PHP中的动态数据。每行都是可扩展的,但是我想要的是每个父行都有子行。因此,例如,存在一个设备类型为4的数字,其中包含20个不同的设备,因此我想在父行中显示设备数字4,当我扩展该行时,显示20个设备(标题为IMEI,Serial no ,等等。)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: 查看我的表格的屏幕截图编辑:添加了当前表(无子行) 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>推荐答案我认为您正在寻找类似这样的东西 https://datatables.net/reference/api/row().child() 。 然后,您可以在子行中添加一个包含更多信息的表。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.编辑:您需要指定HTML想要放孩子。当我想显示孩子时,我会亲自使用ajax来检索孩子。否则,数据需要隐藏在页面中的某个位置。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.我创建了 codepen 将HTML放入行的data属性中。然后,您可以单击一个按钮以查看子行(设备)。显然,还有许多其他方法可以在页面上存储数据。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> 这篇关于如何使此表具有可扩展的行以在扩展时显示其他行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 04:50
查看更多