Paginate one page with different tabs Laravel
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">
<a href="#dashboad" class="active" data-toggle="tab"><i class="fa fa-dashboard"></i>Dashboard</a>
<a href="#users" data-toggle="tab"><i class="fa fa-user"></i>Gestione Utenti</a>
<a href="#comics" data-toggle="tab"><i class="fa fa-book"></i>Gestione Fumetti</a>
<a href="#reviews" data-toggle="tab"><i class="fa fa-map-marker"></i>Gestione Recensione</a>
</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>?<a href="{{ url('/logout') }}" class="logout"> Logout</a>)</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>
<a href="{{ url('/accountArea') }}" class="btn btn-sqr">View</a>
</td>
@else
<td>
Non letto
</td>
<td>
<a href="{{ route('notificaLetta', ['id' => $notification->id]) }}" class="btn btn-sqr">View</a>
</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
2 answers
solution1
0 2020-05-31 17:25:05
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.
solution2
0 ACCPTED 2020-05-31 18:41:32
Solution look like this.
Navigation code:
<div class="myaccount-tab-menu nav" role="tablist" id="myTab">
<a href="#dashboad" class="{{ (Route::currentRouteName() == 'dashboard') ? 'active' : '' }}" data-toggle="tab"><i class="fa fa-dashboard"></i>Dashboard</a>
<a href="#users" class="{{ (Route::currentRouteName() == 'users') ? 'active' : '' }}" data-toggle="tab"><i class="fa fa-user"></i>Gestione Utenti</a>
<a href="#comics" class="{{ (Route::currentRouteName() == 'comics') ? 'active' : '' }}" data-toggle="tab"><i class="fa fa-book"></i>Gestione Fumetti</a>
<a href="#reviews" class="{{ (Route::currentRouteName() == 'reviews') ? 'active' : '' }}" data-toggle="tab"><i class="fa fa-map-marker"></i>Gestione Recensione</a>
</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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Laravel paginate redirect back, if page does not exist
How to redirect paginate to current page? - Laravel 5.5
Laravel return view to last Paginate page
Laravel Paginate: Save record and return to the correct page
Paginate in Laravel
Paginate on Laravel
Laravel 4 - How to use 'offset' in stead of 'page' with Eloquent's ->paginate()?
Using paginate with more than one query output in Laravel
Laravel Eloquent get only one specific field with relationship and paginate
Laravel: retrive and paginate all post belonging to one specific category
Related Tags