Rhynel
2 months ago
219
4
Laravel

Only get firt Letter passed in 2nd nested Ajax Datatables data stored at Status1

Posted 2 months ago by Rhynel

// In Controller

// The row value of status1 is foo BarBad from database

if(request()->ajax()) {

     $Orders = Orders::all();

            return Datatables::of($Orders)->addColumn('ordered_at', function ($Orders) {
                    return $Orders->ordered_at ? 
        with(new Carbon($Orders->ordered_at))->format('l jS \of F Y, h:i:s A') : '';
                })
                ->addColumn('action', 'orders.action_button')
                ->addColumn('amount', function ($Orders) {
                                 return number_format($Orders->amount, 2);
                             })
                 ->addColumn('status2', function ($Orders) {
                    return [
                        "foo BarGood"
                    ];
                })
                ->rawColumns(['action'])
                ->addIndexColumn()
                ->make(true);
  }

}

// View

 <div>
        <table id="laravel_datatable" class="table table-bordered dataTable dtr-inline"
               role="grid" width="100%">
            <thead class="alert-heading">
            <tr>
                <th width="70px"></th>
                <th>Order No.</th>
                <th>Order Date</th>
                <th>Retail Price</th>
                <th>Mode of Payment</th>
                <th>Qty</th>
                <th>Status</th>
                <th width="140px">Action</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    function format ( d ) {
        console.log(d.status2);
        var trs='';
        $.each($(d.status2), function(key,value){
            trs+='<tr>' +
                    '<td>'+d.status2[key]+'</td>' +
                 '</tr>';
        })

        return '<table class="table table-border table-hover">'+
                '<thead>'+
                    '<th width="140px">Send To</th>'+
                    '<th width="140px">SKU</th>'+
                    '<th width="140px">Product</th>'+
                    '<th width="70px">Image</th>'+
                    '<th width="140px">amount</th>'+
                    '<th width="140px">Action</th>'+
                '</thead>' +
                '<tbody>' +
                    trs+
                '</tbody>' +
                '</table>';
    }

$(document).ready( function () {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('#laravel_datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "@if(routeGet() == 'techzadmin.orders'){{ techzadmin_url('orders') }}@endif",
                type: 'GET',
            },
            columns: [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { data: 'order_number', name: 'order_number',
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a href='"+oData.order_number+"'>"+oData.order_number+"</a>");
                    }
                },
                { data: 'created_at', name: 'created_at' },
                { data: function (data, type, dataToSet) {
                        return "&#8369;"+ data.amount;
                    } },
                { data: 'mode_of_payment', name: 'mode_of_payment' },
                { data: 'mode_of_payment', name: 'mode_of_payment' },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],

            order: [[0, 'asc']]
        });

        $('#laravel_datatable 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');
            }
        });

// Only stored letter f instead of foo BarBad of status1. But if I chose status2 the output is foo BarGood

Please sign in or create an account to participate in this conversation.