Paginate one page with different tabs Laravel - php

Question

I want to paginate in a blade file different tabs , each tabs show different collections of object but each time i go to next page in one page it redirects to the first tab and also paginate each tab not just the one i wanted to paginate.
Blade Part Where i have tabs
<div class="container">
<div class="section-bg-color">
<div class="row">
<div class="col-lg-12">
<!-- My Account Page Start -->
<div class="myaccount-page-wrapper">
<!-- My Account Tab Menu Start -->
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="myaccount-tab-menu nav" role="tablist" id="myTab">
<i class="fa fa-dashboard"></i>Dashboard
<i class="fa fa-user"></i>Gestione Utenti
<i class="fa fa-book"></i>Gestione Fumetti
<i class="fa fa-map-marker"></i>Gestione Recensione
</div>
</div>
<!-- My Account Tab Menu End -->
<!-- My Account Tab Content Start -->
<div class="col-lg-9 col-md-8">
<div class="tab-content" id="myaccountContent">
<!-- Single Tab Content Start -->
<div class="tab-pane fade show active" id="dashboad" role="tabpanel">
<div class="myaccount-content">
<h5>Dashboard</h5>
<div class="welcome">
<p>Ciao, <strong>{{ $user->username }}</strong>! (Non sei <strong>{{ $user->username }}</strong>? Logout)</p>
</div>
<p class="mb-0">I tuoi dati:</p>
<p class="mb-0">E-mail: <strong>{{ $user->email }} </strong></p>
</div>
<div class="myaccount-content">
#php
$notifications = \App\Http\Controllers\NotificationController::getNotification($user->id);
#endphp
<h5>Notifiche</h5>
#if($notifications->count() < 1)
<div class="myaccount-content">
<h5>Non ci sono ancora notifiche</h5>
</div>
#else
<div class="myaccount-table table-responsive text-center">
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th>Data</th>
<th>testo</th>
<th>stato</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach($notifications as $notification)
<tr>
<td>{{ $notification->date }}</td>
<td>
#if(strlen($notification->notification_text) > 50 )
#php
$subnotification = substr($notification->notification_text, 0, 50)
#endphp
{{ $subnotification }}...
#else
{{ $notification->notification_text }}
#endif
</td>
#if($notification->state == 1)
<td>
Letto
</td>
<td>
View
</td>
#else
<td>
Non letto
</td>
<td>
View
</td>
#endif
</tr>
#endforeach
</tbody>
</table>
</div>
#endif
</div>
</div>
<!-- Single Tab Content End -->
#if(session('message'))
{{session('message')}}
#endif
<!-- Single Tab Content Start -->
<div class="tab-pane fade" id="users" role="tabpanel">
<div class="myaccount-content">
<h5>Utenti</h5>
<div class="myaccount-table table-responsive text-center">
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th>Nickname</th>
<th>Phone</th>
<th>Email</th>
<th>Tipologia</th>
<th>Elimina</th>
</tr>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->username}}</td>
<td>{{$user->phone_number}}</td>
<td>{{$user->email}}</td>
#if($user->hasGroup('il gruppo degli utenti'))
<td>Utente</td>
#else
<td>Venditore</td>
#endif
<td><a class="btn btn-danger" onclick="return myFunction();" href="{{route('user-delete', $user->id)}}"><i class="fa fa-trash"></i></a></td>
<script>
function myFunction() {
if(!confirm("Sei sicuro di voler eliminare questo utente"))
event.preventDefault();
}
</script>
</tr>
#endforeach
{{ $users->links() }}
</tbody>
</table>
</div>
</div>
</div>
<!-- Single Tab Content End -->
<!-- Single Tab Content Start -->
<div class="tab-pane fade" id="comics" role="tabpanel">
<div class="myaccount-content">
<h5>Fumetti</h5>
<div class="myaccount-table table-responsive text-center">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Titolo</th>
<th>ISBN</th>
<th>Quantità</th>
<th>Utente</th>
<th>Elimina</th>
</tr>
</thead>
<tbody>
#foreach($comics as $comic)
#php
$userNeed = App\User::where('id','=',$comic->user_id)->first();
#endphp
<tr>
<td>{{$comic->comic_name}}</td>
<td>{{$comic->ISBN}}</td>
<td>{{$comic->quantity}}</td>
<td>{{$userNeed->username}}</td>
<td><a class="btn btn-danger" onclick="return myFunction();" href="{{route('comic-delete', $comic->id)}}"><i class="fa fa-trash"></i></a></td>
<script>
function myFunction() {
if(!confirm("Sei sicuro di voler eliminare questo fumetto"))
event.preventDefault();
}
</script>
</tr>
#endforeach
{{ $comics->links() }}
</tbody>
</table>
</div>
</div>
</div>
<!-- Single Tab Content End -->
<!-- Single Tab Content Start -->
<div class="tab-pane fade" id="reviews" role="tabpanel">
<div class="myaccount-content">
<h5>Recensione</h5>
<div class="myaccount-table table-responsive text-center">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Titolo</th>
<th>Fumetto</th>
<th>Recensore</th>
<th>Elimina</th>
</tr>
</thead>
<tbody>
#foreach($reviews as $review)
#php
$userReview = App\User::where('id','=',$review->user_id)->first();
$comicReview = App\Comic::where('id','=',$review->comic_id)->first();
#endphp
<tr>
<td>{{$review->review_title}}</td>
<td>{{$comicReview->comic_name}}</td>
<td>{{$userReview->username}}</td>
<td><a class="btn btn-danger" onclick="return myFunction();" href="{{route('review-delete-local', $review->id)}}"><i class="fa fa-trash"></i></a></td>
<script>
function myFunction() {
if(!confirm("Sei sicuro di voler eliminare questa recensione"))
event.preventDefault();
}
</script>
</tr>
#endforeach
{{ $reviews->links() }}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div> <!-- My Account Tab Content End -->
</div>
</div> <!-- My Account Page End -->
</div>
</div>
</div>
</div>
</div>
And this is my route
Route
Route::get('/adminArea', function () {
$user = \Illuminate\Support\Facades\Auth::user();
$users = \App\User::where('username','!=','admin')->orderBy('username', 'asc')->paginate(12);
$comics =Comic::orderBy('comic_name', 'asc')->paginate(12);
$reviews = \App\Review::orderBy('review_title', 'asc')->paginate(12);
return view('adminPanel')
->with(compact('user'))
->with(compact('users'))
->with(compact('comics'))
->with(compact('reviews'));
})->name('AdminAccount');
In the end what i want to do is to paginate each tab differently meaning if a put the next on the comics i don't want to show also in the user tab the second page of user. The problem is that it use the same pagination url for each tabs so i was wondering if the solution is to give each tab an indipendent url

Answer 1

It redirects to the first tab because you use javascript tabs with active class added to first tab. To resolve problem with tabs you need to change for each tabs nav to:
<a href="#dashboad" class="{{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}" ...
Also here:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}"...
But your problems with paginations will remain.
Here are 2 solutions:
Use JS tabs and get data via Ajax request.
Use 4 separated routes for each collection and add routes to tabs corresponding above example.
I hope it was clear.

Answer 2

Solution look like this.
Navigation code:
<div class="myaccount-tab-menu nav" role="tablist" id="myTab">
<i class="fa fa-dashboard"></i>Dashboard
<i class="fa fa-user"></i>Gestione Utenti
<i class="fa fa-book"></i>Gestione Fumetti
<i class="fa fa-map-marker"></i>Gestione Recensione
</div>
Also for each tab add, don't forget to change route name for each:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'dashboard') ? 'active' : '' }}" id="dashboad" role="tabpanel">
Route code:
Route::get('/dashboard', function () {
$user = \Illuminate\Support\Facades\Auth::user();
return view('adminPanel')->with(compact('user'));
})->name('dashboard');
Route::get('/users', function () {
$users = \App\User::where('username','!=','admin')->orderBy('username', 'asc')->paginate(12);
return view('adminPanel')->with(compact('users'));
})->name('users');
Route::get('/comics', function () {
$comics =Comic::orderBy('comic_name', 'asc')->paginate(12);
return view('adminPanel')->with(compact('comics'));
})->name('comics');
Route::get('/reviews', function () {
$reviews = \App\Review::orderBy('review_title', 'asc')->paginate(12);
return view('adminPanel')->with(compact('reviews'));
})->name('reviews');