javascript - 如何创建子行来显示 jquery 数据表中的订单详细信息？

Question

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

谁能帮我解决这个问题吗？

JSP 内部

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

这是这个的js文件

Js 文件内部

$('#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 }
            ]

        });

这是rest服务的json结构。

我的 Json

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

我想在数据表中显示这样的订单详细信息。有人可以帮我解决这个问题吗？

Answer 1

为此使用 DataTables 和 RowGroup 功能引用链接rowgroup example link