Javascript 如何创建子行以在jquery datatable中显示订单详细信息？

我有一个返回数据列表的服务。我想在jquery数据表中显示每个订单的订单项目详细信息

有人能帮我吗

内部JSP 我想在datatable中显示这样的订单详细信息。谁能帮我一下吗

---

为此使用数据表和行组功能 参考链接

                                                        <table class="table table-bordered" id="physicalOrderDataTable">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>PRODUCT</th>
                                                                    <th>VARIANT</th>
                                                                    <th>ADDRESS</th>
                                                                    <th>STATUS</th>
                                                                    <th>PACKING ID</th>
                                                                    <th>TRACKING ID</th>
                                                                    <th>ACTION</th>
                                                                </tr>
                                                            </thead>

                                                        </table>
                                                    </div>

$('#physicalOrderDataTable').DataTable({

            destroy: true,
            "serverSide" : true,
            lengthChange : false,
            ordering : false,
            paging : true,
            "pagingType" : "full_numbers",
            processing : true,
            autoWidth : true,
            oLanguage : {
                sSearch : 'Search:'
            },
            ajax : {
                url : 'service/getAllOrderDetails',
                dataSrc : 'details',
                "type" : "GET"
            },

            columns : [{
                "render": function (data, type, row, meta) {
                     return meta.row + meta.settings._iDisplayStart + 1;
                    }  
            },{
                data : 'orderNo'
            }, {
                data : 'VariantName'
            }, {
                data : 'address'
            } , {
                data : 'status'
            }, {
                data : 'packingId'
            }, {
                data : 'trackingId'
            }, {
                'data': 'orderDetailsId',
                "render": function (orderDetailsId, type, full, meta) {
                    // debugger
                    return '<button class="btn btn-info btn-sm addBank" data-uId="'+orderDetailsId+'" data-toggle="tooltip" data-placement="top" title="Update" ><i class="fa fa-university"></i></button>';
                }
            }

            ],
            "fnDrawCallback": function() {
                //Initialize tooltip 
                $('[data-toggle="tooltip"]').tooltip();
            },

            columnDefs: [
                { width: '2%', targets: 0 }
            ]

        });

  "details": [
    {
      "orderNo": "OD-181120192",
      "onlineCartPhysicalOrderDetails": [
        {
          "orderDetailsId": 9,
          "productName": "Casual Shirt",
          "address": "dffdf",
          "status": "PENDING",
          "packingId": null,
          "trackingId": null,
          "variantName": "Puma Casual Shirt"
        },
        {
          "orderDetailsId": 10,
          "productName": "Casual Shirt",
          "address": "XYZ",
          "status": "PENDING",
          "packingId": null,
          "trackingId": null,
          "variantName": "Red Medium Casual Shirt"
        }
      ]
    },
    {
      "orderNo": "OD-181120191",
      "onlineCartPhysicalOrderDetails": [
        {
          "orderDetailsId": 8,
          "productName": "Casual Shirt",
          "address": "ERTTY",
          "status": "PENDING",
          "packingId": null,
          "trackingId": null,
          "variantName": "Puma Casual Shirt"
        }
      ]
    }
  ],
  "draw": 1,
  "length": 10,
  "recordsTotal": 2,
  "recordsFiltered": 2
}