How do i specify the child rows for each row in my table ?

PembaT

I'm using the datatable example of child rows without the ajax and im having a problem where my child rows all have the same data.

function format ( d ) {
                // `d` is the original data object for the row
                return '<div class="col-md-8" style="padding-top:20px;">'+
                '<table class="table table-bordered">'+
                    '<tr>'+
                            '<th>'+
                                "Product Name"+
                            '</th>'+
                            '<th>'+
                                "Quantity"+
                            '</th>'+
                        '</tr>'+                
                        '<tr>'+
                            '<td>'+
                                "data here"+
                            '</td>'+
                            '<td>'+
                                "data here"+
                            '</td>'+
                        '</tr>'+
                '</table>'+
                '</div>';
            }
            $('#manageOrderTable tbody button').on('click', function () {
            var tr = $(this).closest('tr');
            var row = t.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');
            }
            } ); 

This is my table:

 <tbody>
                                @php 
                                $x=0; 
                                @endphp
                                @foreach ($orders as $order)                                  
                                <tr>
                                    <td></td>
                                    <td>{{$order->order_date}}</td>
                                    <td>{{$order->client_name}}</td>
                                    <td>{{$order->client_contact}}</td>
                                    <td class="details-control">
                                        <button class="btn btn-info btn-xs">
                                            <b>Items : </b> {{$item_count["$x"]}} 
                                        </button>
                                        Item Id: @for ($y = 0; $y < $item_count["$x"]; $y++)
                                                {{$item_list["$y"]->product_id}}
                                            @endfor
                                        
                                        {{-- <!-- Split button -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn btn-info btn-xs"><b>Items : </b> {{$item_count["$x"]}}</button>
                                            <button type="button" class="btn dropdown-toggle btn btn-info btn-xs" data-toggle="collapse" data-target="#extra_info{{$x}}" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            </button>
                                        </div>--}}
                                        
                                        {{-- <div id="extra_info{{$x}}" class="collapse">
                                            @for ($y = 0; $y < $item_count["$x"]; $y++)
                                                {{$item_list["$y"]->product_id}}
                                            @endfor
                                              
                                        </div>                                                  --}}
                                    </td>
                                    @if ($order->payment_status==1)
                                    <td><label class="label label-success">Full Payment</label></td>
                                    @elseif($order->payment_status==2)
                                    <td><label class="label label-info">Advance Payment</label></td>
                                    @else
                                    <td><label class="label label-warning">No Payment</label></td>
                                    @endif
                                    <td>
                                        <!-- Single button -->
                                        <div class="btn-group">
                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Action <span class="caret"></span>
                                          </button>
                                          <ul class="dropdown-menu">
                                            <li><a href="{{route('orders.edit',$order->order_id)}}" id="editOrderModalBtn"> <i class="glyphicon glyphicon-edit"></i> Edit</a></li>
                                            
                                            <li><a type="button" data-toggle="modal" id="paymentOrderModalBtn" data-target="#paymentOrderModal" data-due="{{$order->due}}" data-id="{{$order->order_id}}"> <i class="glyphicon glyphicon-save"></i> Payment</a></li>

                                            <li><a type="button" onclick="printOrder({{$order->order_id}})"> <i class="glyphicon glyphicon-print"></i> Print </a></li>
                                            
                                            
                                            <li><a href="{{route('orderDelete',$order->order_id)}}" type="button"> <i class="glyphicon glyphicon-trash"></i> Remove</a></li>       
                                          </ul>
                                        </div>
                                    </td>
                                </tr>
                                @php
                                $x++;
                                @endphp
                                @endforeach
                            </tbody>

I want to show the item id of each row in the child table.

colin

Hi @PembaT ,

You're passing the row data into your format() function as d, but you're not referencing d within that function, so yep, your function will just return the same thing every time it's called.

Cheers,

Colin

PembaT

@colin how do i use the child rows without using ajax ?

kthorngren

Taking a quick look it doesn't look like Product Name and Quantity are in the table data. Is this correct?

If the data is not in the client then there are a couple options:
1. Use ajax to fetch the child data (sounds like you don't want this).
2. Add the child data to your table as columns then use -columns.visible to hide the columns. The data will then be available in the d variable in the format function.
3. Provide the data to Datatables using either ajax or data and let Datatables build the table.

Kevin

PembaT

@kthorngren i managed to get the desired output i wanted using jquery.

<div class="btn-group">
                                            <button type="button" class="btn btn btn-info btn-xs"><b>Items : </b> {{$item_count["$x"]}} <input type="hidden" id="item_count{{$x}}" value={{$item_count["$x"]}}> </button>
                                            <button type="button" class="btn dropdown-toggle btn btn-info btn-xs extra-info" data-toggle="collapse" data-target="#detail_info{{$x}}" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            </button>
                                        </div>
                                        
                                        <div id="detail_info{{$x}}" class="collapse detail-info col-md-6" style="margin-top:5px;">
                                                <table class="table table-striped table-bordered table-hover" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
                                                        <thead>
                                                            <tr>
                                                                <th style="white-space: nowrap;">Product Name</th>
                                                                <th>Quantity</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            
                                                                @for ($y = 0; $y < $item_count["$x"]; $y++)
                                                                    @foreach ($products_data as $product)
                                                                    @if($item_list["$y"]->product_id==$product['product_id'])
                                                                    <tr>            
                                                                    <td>{{$product['product_name']}}</td>
                                                                    <td>{{$product['product_quantity']}}</td>
                                                                    </tr>
                                                                    @endif
                                                                    @endforeach
                                                                @endfor
                                                                
                                                            </tbody>
                                                </table>
                                        </div>

and in my jquery i put

$('#manageOrderTable tbody .extra-info').on('click', function () {
            var tr = $(this).closest('tr');
            var row = t.row( tr );
            var id= tr.attr('id');
            
                row.child( $( "#detail_info"+id ) ).show(500);
            } );

but once i collapse the child row i get unwanted row below parent row how do i fix this?

colin

Hi @PembaT ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin