Displaying data in Laravel DataTable

Question

This is how my normal html table looked like. In the table, i display the countries as tabs and under every tab a user clicks, the tables displays teams that belong to the particular country(tab). This works fine.

      <div  class="nav-tabs-custom" id="tabs">

        <ul id="myUL" class="nav nav-tabs">
        @foreach($countries as $country)

           <li ><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$country->name!!}</a></li>
           @endforeach


        </ul>
        <div class="tab-content">
        @foreach($countries as $key => $country)

          <div class="tab-pane" id="tab_{{ $country->id }}">
          <table class="table" id="tables">
                            <thead>
                                <tr> 
                                    <th></th>
                                    <th colspan="5"></th>
                                    <th></th>
                                </tr>
                           </thead>
                           <tbody id="list">
           @foreach($country->teams as $team) 
                           <td><input onclick="return show(this)" data-team="{{$team->toJson()}}" type="checkbox" id="{!! $team->id !!}" name="{!! $team->name !!}" value="{!! $team->value !!}" /> </td>
                                    <td width="600">{{$team->name }}</td>
                                     <td>{{ $team->value}}</td>
                                </tr>
          @endforeach        
       </tbody>
       </table>
         </div>
        @endforeach     
          </div>    

        </div>

But now, i am new to datatables and i am trying to convert the html to datatables as below

      <div  class="nav-tabs-custom" id="tabs">

        <ul id="myUL" class="nav nav-tabs">
        @foreach($countries as $country)

           <li ><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$country->name!!}</a></li>
           @endforeach


        </ul>
        <div class="tab-content">
        @foreach($countries as $key => $country)

          <div class="tab-pane" id="tab_{{ $country->id }}">
          <table class="table" id="tables">
                            <thead>
                                <tr> 
                                    <th></th>
                                    <th colspan="5"></th>
                                    <th></th>
                                </tr>
                           </thead>

       </table>
         </div>
        @endforeach     
          </div>    

        </div>


<script type="text/javascript">
$(document).ready(function() {

        oTable = $('#tables').DataTable({
            "processing": true,
            "serverSide": true,
            "bProcessing":false,
            "bSort":false,
            "ajax": "{{ route('datatable.findteam') }}",
            "columns": [
                {data: 'check', name: 'check', orderable: false, searchable: false},    
                {data: 'team_name', name: 'team_name'},  
                {data: 'team_value', name: 'team_value'},
          ],        
        });

});
</script>

Controller

 public function create()
     {
         $countries = Country::where('id', Auth::user()->id)->get();
         return view('create',compact('countries'));
     }

     public function getTeams()
     {
        $countries = Country::where('id', Auth::user()->id)->get();    

        return Datatables::of($countries)->addColumn('check', function ($country) {
            foreach($country->teams as $team){

            return '
            <input onclick="return show(this)" data-team="{{$team->toJson()}}" type="checkbox" id="{!! $team->id !!}" name="{!! $team->name !!}" value="{!! $team->value !!}" />
            ';
            } 
            })->addColumn('team_name', function ($country) {
                foreach($country->teams as $team){
                 return $team->name;
                }
            })->addColumn('team_value', function ($country) {
                foreach($country->teams as $team){                    
                return  $team->value;

                }
            })

->make(true); 
     }

Now my issue is, when i run my project, it only fetches the first team for each country and place them under the first country in the tab showing on the table. How can i make it work like the how it was working in the normal html table above?

Any help is very much appreciated. Thank you

Answer 1

If I'm right you are actually trying to put your teams table on a DataTable. Then this should work for you

public function getTeams($country_id) {
    $teams = Team::where('country_id', $country_id);

    return Datatables::of($teams)
        ->addColumn('check', function (Team $team) {
            return '<input onclick="return show(this)" data-team="'.$team->toJson().'" type="checkbox" id="'.$team->id.'" name="'.$team->name.'" value="'.$team->value.'" />
                ';
        })->addColumn('team_name', function (Team $team) {
            return $team->name;
        })->addColumn('team_value', function (Team $team) {                  
            return  $team->value;
        })
        ->rawColumns([x])// x the index for your check column,
        ->make(true); 
}

*when i run my project, it only fetches the first team for each country and place them under the first country in the tab showing on the table* - this is because on your addColumn you loop through the teams in a country and immediately return the team name.

->addColumn('team_name', function ($country) {
    foreach($country->teams as $team){
        return $team->name; // this team will immediately return as the
                            // value of team_name, that's why you only get
                            //  the first team
    }
}