Jquery 数据表子行 - TypeError: undefined is not an object (evaluating 'm[n].style')

如何解决Jquery 数据表子行 - TypeError: undefined is not an object (evaluating 'm[n].style')

我正在尝试使用子行创建一个数据表，每个子行都有一个包含多行的表，我的代码看起来应该根据 https://datatables.net/examples/api/row_details.html 上的示例工作，但是我收到以下错误>

TypeError: undefined is not an object (evaluating 'm[n].style')

小提琴在这里：https://jsfiddle.net/tpmwL9qc/1/ 但是小提琴给出了一个不同的错误，可能是因为我试图通过 json 数组而不是 Ajax 请求加载？

这是我的代码：

html

    <div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-row justify-content-between">
                    <h4 class="card-title"><i class="fa fa-fighter-jet"></i> Device Inventory  </h4>
                </div>
                <p>&nbsp;</p>
                <div class="table-responsive">
                    <table width="100%" class="table  dtr-inline" id="device_inventory" role="grid" style="width: 100%;">   
                        <thead>         
                            <tr>
                                <th>Site</th>   
                                <th>Hostname</th>
                                <th>Model</th>  
                                <th>Serial No</th>
                                <th>Mgmt IP</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Datatables JavaScript -->
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    var row_data =  '<table>'+
        '<tr>' +
            '<th>Part No</th>' +
            '<th>Description</th>' +
            '<th>Serial No</th>' +
        '</tr>'
        $.each(d.parts,function(idx,part){
            row_data += '<tr>' +
            '<td>' + part.part_no + '</td>' +
            '<td>' + part.description + '</td>' +
            '<td>' + part.serial_no + '</td>' +
        '</tr>'
        });
        row_data += '</table>'
    return row_data
}
 
$(document).ready(function() {
    var table = $('#device_inventory').DataTable( {
        "ajax": "{% url 'config:device_inventory_data' %}","columns": [
            {
                "className":      'details-control',"orderable":      false,"data":           null,"defaultContent": ''
            },{ "data": "site" },{ "data": "host_name" },{ "data": "model" },{ "data": "serial_no" },{ "data": "mgmt_ip" }
        ],"order": [[1,'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#device_inventory tbody').on('click','td.details-control',function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
</script>

这是我的 json

[
    {
        "site": "HQ","hostname": "HQ-ACS","model": "Cisco - VMWare","serial_no": null,"mgmt_ip": "10.10.10.100","parts": []
    },{
        "site": "HQ","hostname": "HQ-VPN","model": "Cisco - CISCO2951/K9","serial_no": "****","mgmt_ip": "172.16.1.1","parts": [
            {
                "part_no": "CISCO2951/K9","description": "CISCO2951/K9","serial_no": "****"
            },{
                "part_no": "EHWIC-1GE-SFP-CU","description": "Enhanced High Speed WAN Interface Card-1 Port Gigabit Ethernet SFP/Cu on Slot 0 SubSlot 0",{
                "part_no": "EHWIC-4ESG","description": "4 Port GE Non-POE EHWIC Switch on Slot 0 SubSlot 1",{
                "part_no": "PWR-2921-51-AC","description": "C2921/C2951 AC Power Supply","serial_no": "****"
            }
        ]
    },"hostname": "HQ-FW-02","model": "Checkpoint - Firewall","mgmt_ip": "10.10.10.1","hostname": "HQ-RTR-01","model": "Cisco - CISCO3945-CHASSIS","mgmt_ip": "1.1.1.1","parts": [
            {
                "part_no": "CISCO3945-CHASSIS","description": "CISCO3945-CHASSIS",{
                "part_no": "C3900-SPE150/K9","description": "Cisco Services Performance Engine 150 for Cisco 3900 ISR on Slot 0",{
                "part_no": "PWR-3900-AC","description": "C3900 AC Power Supply 1","description": "C3900 AC Power Supply 2","serial_no": "*****"
            }
        ]
    }
]

解决方法

根据您问题中的代码（不是小提琴），关于您可以修复的项目的一些说明：

---

列定义：

{ "data": "host_name" }

应该如下，以匹配您的 JSON：

{ "data": "hostname" }

---

DataTable 定义包括 6 列，从一个空列开始：

{ ...,"data": null,"defaultContent": '' },

但是您的 HTML 表格没有用于此的列 - 因此您可以在 <tr> 部分的开头添加它：

<tr>
    <th></th>   
    <th>Site</th>   
    <th>Hostname</th>
    <th>Model</th>  
    <th>Serial No</th>
    <th>Mgmt IP</th>
</tr>

这是圆形按钮/图像将显示的地方。

---

演示（在链接中）需要您提供按钮的 open.png 和 close.png 图形。我在小提琴代码中没有看到它们（或相关的 CSS）。

有关详细信息，请参阅演示的 CSS 选项卡。

即使没有图标，您也应该能够点击第 1 列中的每个单元格来打开和关闭子行。

---

假设您解决了上述所有问题...

创建子表的代码看起来不错 - 例如，我在第二行得到了这个：

---

更新：

查看 Fiddle 中的代码：

您应该更改资源的顺序，以便在 DataTables JS 库之前首先声明 jQuery。这将解决指出“DataTables 不是函数”的错误。