使用不同的选项卡对一页进行分页 Laravel
Paginate one page with different tabs Laravel
我想在 blade 文件中分页不同的选项卡,每个选项卡显示不同的 collections 或 object 但每次我转到一页中的下一页时,它会重定向到第一个选项卡并对每个选项卡进行分页,而不仅仅是我想要分页的那个。
Blade 我有标签的部分
<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>
这是我的路线
路线
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');
最后我想做的是对每个选项卡进行不同的分页,这意味着如果将下一个放在漫画上我不想在用户选项卡中显示用户的第二页。问题是它对每个选项卡使用相同的分页 url 所以我想知道解决方案是否是给每个选项卡一个独立的 url
它重定向到第一个选项卡,因为您使用 javascript 个选项卡并将 active
class 添加到第一个选项卡。要解决选项卡问题,您需要将每个选项卡导航更改为:
<a href="#dashboad" class="{{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}"
...
也在这里:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}"
...
但是您的分页问题仍然存在。
这里有 2 个解决方案:
- 使用 JS 选项卡并通过 Ajax 请求获取数据。
- 为每个集合使用 4 个单独的路由,并将路由添加到对应于上述示例的选项卡。
我希望已经清楚了。
解决方案如下所示。
导航代码:
<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>
同样为每个选项卡添加,不要忘记为每个更改路由名称:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'dashboard') ? 'active' : '' }}" id="dashboad" role="tabpanel">
路线代码:
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');
我想在 blade 文件中分页不同的选项卡,每个选项卡显示不同的 collections 或 object 但每次我转到一页中的下一页时,它会重定向到第一个选项卡并对每个选项卡进行分页,而不仅仅是我想要分页的那个。
Blade 我有标签的部分
<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>
这是我的路线 路线
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');
最后我想做的是对每个选项卡进行不同的分页,这意味着如果将下一个放在漫画上我不想在用户选项卡中显示用户的第二页。问题是它对每个选项卡使用相同的分页 url 所以我想知道解决方案是否是给每个选项卡一个独立的 url
它重定向到第一个选项卡,因为您使用 javascript 个选项卡并将 active
class 添加到第一个选项卡。要解决选项卡问题,您需要将每个选项卡导航更改为:
<a href="#dashboad" class="{{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}"
...
也在这里:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }}"
...
但是您的分页问题仍然存在。
这里有 2 个解决方案:
- 使用 JS 选项卡并通过 Ajax 请求获取数据。
- 为每个集合使用 4 个单独的路由,并将路由添加到对应于上述示例的选项卡。
我希望已经清楚了。
解决方案如下所示。
导航代码:
<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>
同样为每个选项卡添加,不要忘记为每个更改路由名称:
<!-- Single Tab Content Start -->
<div class="tab-pane fade show {{ (Route::currentRouteName() == 'dashboard') ? 'active' : '' }}" id="dashboad" role="tabpanel">
路线代码:
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');