Filtered datatables with bootstrap tabs
Hello everyone,
Thanks to all the discussions made here I solved almost most of my questions when learning Laravel. I'm still learning with jQuery mode, maybe later on I'll go further with livewire, which looks better as far as I've learnt so far.
Anyway, back to the point, I have a datable of AcademicRegistration which contains lots of data with all the SchoolYear included. I'd like to have on my index.blade.php bootstrap tabs which will contains tables with the same structures but filtered data.
What I have in Model\AcademicRegistration
public function session()
{
return $this->belongsTo(AcademicSession::class, 'session_id');
}
public function student()
{
return $this->belongsTo(Student::class, 'student_id', 'id');
}
Model\AcademicSession
public function sessionAcademicRegistrations()
{
return $this->hasMany(AcademicRegistration::class, 'session_id', 'id');
}
AcademicRegistrationController :
public function index()
{
// To retrieve records filtered by AcademicSession
$pSessions = AcademicSession::where('published', 1)->get();
$myArr2 = AcademicSession::where('published', 1)
->with('sessionAcademicRegistrations')
->pluck('id');
$academicRegistrations = AcademicRegistration::whereIn('session_id', $myArr2)
->with('enrollment_status', 'payment_state', 'student',
'session', 'formation', 'reg_type', 'lva', 'lvb', 'lvc',
'section', 'spe_1', 'spe_2', 'spe_3', 'options')
->orderBy('enrollment_no', 'desc')->paginate(
$perPage = 10, $columns = ['*'], $pageName = 'records'
);
And in my index.blade.php
<div class="card card-primary card-outline">
<div class="p-0 card-header d-flex">
<ul class="p-2 ml-auto nav nav-pills" id="myTab">
@foreach ($pSessions as $count => $session)
<li @if($count == 0) class="nav-item active" @else class="nav-item" @endif>
<a class="nav-link" href="#tab_{{ $session->id }}" data-toggle="tab">
{{ $session->name }}
</a>
</li>
@endforeach
</ul>
</div>
<div class="card-body">
<div class="tab-content">
@foreach ($pSessions as $count => $session)
<div @if($count == 0) class="tab-pane table-responsive active" @else class="tab-pane" @endif
id="tab_{{ $session->id }}">
<h3>{{ $session->name }}</h3>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
School Year
</th>
<th>
Formation
</th>
<th>
Student Name
</th>
</tr>
</thead>
<tbody>
@foreach($academicRegistrations as $key => $academicRegistration)
<tr data-entry-id="{{ $academicRegistration->id }}">
<td>
{{ $session->name }}
</td>
<td>
{{ $session->formation }}
</td>
<td>
{{ $session->student->name }}
</td>
</tr>
@endforeach
</tbody>
</table>
{!! $academicRegistrations->links('pagination::bootstrap-5') !!}
</div>
</div>
</div>
</div>
</div>
But when I tried clicking/switching the tab, only the title changed, so it means the tabs' working; but the table's content doesn't change. What did I miss? Is there any tips/tricks how to detect errors in Laravel?
Thank you very much for any helps. Warm Regards
Please or to participate in this conversation.