Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

chabun's avatar

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

0 likes
0 replies

Please or to participate in this conversation.