Example:

https://datatables.net/examples/api/row_details.html

Data Format (with column name)

https://datatables.net/examples/ajax/data/objects.txt

Columns Config:

https://datatables.net/reference/option/columns

JS example:

var dt_orders = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $(".main-content");
        $t = $c.find('#dt_orders');

        init_dt();
    }

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "ajax": {
                'url': base_url + 'admin/order/all',
                'data': function(d){
                    var $c = $('.buttons_panel');
                    d.from = get_value('from', $c);
                    d.to = get_value('to', $c);
                    d.status = get_value('status', $c);
                }
            },
            "order": [[ 3, "desc" ]], 
            'columns': [
                {
                    'data': 'style', 
                    'visible': false, 
                },
                {
                    'data': 'detail', 
                    "className": 'details-control',
                    //'title': '測試', //欄位顯示名稱
                },
                {
                    'data': 'finish', 
                },
                {
                    'data': 'id', 
                },
                {
                    'data': 'product_name', 
                },
                {
                    'data': 'seller', 
                },
                {
                    'data': 'sell_qty', 
                },
                {
                    'data': 'buyer', 
                },
                {
                    'data': 'buy_qty', 
                },
                {
                    'data': 'fee', 
                },
                {
                    'data': 'amount', 
                },
                {
                    'data': 'status', 
                },
                {
                    'data': 'created_at', 
                },
                {
                    'data': 'action', 
                },
            ], 
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            createdRow: function( row, data, dataIndex ) {
                var $row = $(row);
                $row.addClass(data.style);
            },
            "language" : {
                "url": "/plugins/datatable_zhtw.json"
            }
        });
    }

    function format ( d ) {
        // `d` is the original data object for the row
        var html = '<div class="row child-row">';
        
        html += '<div class="col-md-4">' + 
                '<span class="title">賣方:</span> <br/>' + 
                '姓名: ' + d.seller + '<br/>' + 
                '遊戲暱稱: ' + d.seller_nicknames + '<br/>' + 
                '銀行帳戶: ' + d.seller_bank + '<br/>' + 
                '收幣: ' + d.sell_qty + '<br/>' + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">買方:</span> <br/>' + 
                '姓名: ' + d.buyer + '<br/>' + 
                '遊戲暱稱: ' + d.buyer_nicknames + '<br/>' + 
                '銀行帳戶: ' + d.buyer_bank + '<br/>' + 
                '給幣: ' + d.buy_qty + '<br/>' + 
            '</div>';
        html += '</div>';

        html += '<div class="row child-row">';
        html += '<div class="col-md-4">' + 
                '<span class="title">付款資料:</span> <br/>' + d.cvs_code + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">其它資訊:</span> <br/>' + d.location + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">異常資訊:</span> <br/>' + d.disputes + 
            '</div>';

        html += '</div>';
        return html;
    }

    function loaded(oSettings){
        $t.find('tbody td.details-control').off('click').on( 'click', function () {
            var tr = $(this).closest('tr');
            var row = datatable.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');
            }
        });

        $t.find('.action.cancel_payment').unbind().on('click', function(e){
            e.preventDefault();
            var $this = $(this);
            var order_id = $this.data('id');

            if(confirm('確定取消這筆付款?') == true){
                cancel_payment(order_id);
            }
        });
    }

    function refresh(){
        //d_table.fnDestroy();
        if(datatable != null){
            datatable.destroy();
        }
        //var $t = $c.find('.datatable');
        //console.log($.fn.dataTable.isDataTable($t));
        
        init_dt();
    }

    return {
        init: init, 
        refresh: refresh
    }
}();