在数据表中显示项目

Question

这是我的普通html表的样子。在表格中，我将国家/地区显示为选项卡，在用户单击的每个选项卡下，表格显示属于特定国家/地区的选项卡（选项卡）。这很好用。

      <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>

但现在，我是数据表的新手，我正在尝试将html转换为数据表，如下所示

      <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>

调节器

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

现在我的问题是，当我运行我的项目时，我能够显示属于登录用户的团队，但我无法将团队分类到各自的国家/地区。

PS：如果您查看正常的html表格，您可以看到我能够在标签内容中对各自国家/地区的团队进行分类

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    

实际上你正在用相同的id tables重复这些表，所以它不会像你期望的那样工作，

也可以预先编写脚本

@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

最后将国家ID传递给路线并相应地在控制器中进行更改，它将起作用..