这是我的普通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>
但是现在,我是datatables的新手,我正在尝试将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表格,您可以看到我能够在标签内容中对各自国家/地区的团队进行分类
答案 0 :(得分: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传递给路线并相应地在控制器中进行更改,它将起作用..