Datatable with Row Details (Child Row)

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
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

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

}

}();

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Datatable with Row Details (Child Row)