Displaying Items In Datatables

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, I am able to display the teams that belong to the logged in user but i cannot categorize the teams into their respective countries.

PS: if you look in the normal html table which works, you can see that i am able to categorize the teams under their respective countries in the tab content

Answer 1

 @foreach($countries as $key => $country)

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

       </table>
         </div>
        @endforeach    

Actually you are repeating the tables with same id tables so its wont work just like you expected,

foreach the script as well , just like

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

        oTable = $('#tables_{{ $country->id }}').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>
@endforeach

and finally pass the country id to the route and make changes in the controller accordingly , It will work..