Have you tried using paginate instead of get?
How to achieve a pagination for this scenario?
I have a UserController that has the index() method that get all congresses organzied by a user with "$congresses = $user->congresses()->get();". Then in the view I show, for example the draftCongresses, like:
@foreach($congresses->filter(function ($item) { return $item->draftCongresses(); }) as $congress)
<li class="list-group-item">
<p class="font-size-xsm"><i class="fa fa-calendar" aria-hidden="true"></i>
{{$congress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
<h5 class="card-title">
{{$congress->name}}</h5>
<a href="{{route('congress.manage', ['id' => $congress->id])}}" class="btn btn-outline-primary font-size-sm">Panel</a>
</li>
@endforeach
I want to have a pagination for this results, to navigate between the draftCongresses. By default I just want to show 5 congresses then I want to have pagination to navigate between the other congresses.
Im not understanding how to use the laravel paginate() method because the congresses are get with "$congresses = $user->congresses()->get();" but then in the view there are different foreach, one to show the pastCongresses, other to show the publishedCongresses and other to show the draftCongresses.
Do you know how to achieve a pagination for each foreach in this scenario?Because there is only one route that returns all congresses organized by the user to the view and then each foreach shows the necessary results in each tab.
class UserController extends Controller
{
public function index(){
$user = Auth::user();
$congresses = $user->congresses()->get();
return view('users.index', compact('user','registrations', 'congresses', $congresses));
}
}
class Congress extends Model
{
public function draftCongresses(): bool
{
return $this->status == 'D';
}
}
Route to this view:
Route::get('/user/profile', [
'uses' => 'UserController@index',
'as' =>'user.index'
]);
View that have the tabs to show the pastCongresses, the draftCongresses and the publishedCongresses.
<div class="tab-pane clearfix fade" id="myCongresses" role="tabpanel" aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" href="#draftCongresses" data-toggle="tab"
role="tab">Draft congresses</a>
</li>
<li class="nav-item">
<a class="nav-link border" href="#publishedCongresses" data-toggle="tab"
role="tab">Published</a>
</li>
<li class="nav-item">
<a class="nav-link border" href="#pastCongresses" data-toggle="tab"
role="tab">Past Congresses</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade active show clearfix" id="draftCongresses" role="tabpanel"
aria-labelledby="home-tab">
<ul class="list-group">
@foreach($congresses->filter(function ($item) { return $item->draftCongresses(); }) as $congress)
<li class="list-group-item">
<p class="font-size-xsm"><i class="fa fa-calendar" aria-hidden="true"></i>
{{$congress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
<h5 class="card-title">
{{$congress->name}}</h5>
<a href="{{route('congress.manage', ['id' => $congress->id])}}" class="btn btn-outline-primary font-size-sm">Panel</a>
</li>
@endforeach
</ul>
<!-- Pagination div static for now-->
<div class="text-center mt-3">
<div class="col">
<nav aria-label="...">
<ul class="pagination d-flex justify-content-center">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">2</span>
<span class="sr-only">(current)</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="tab-pane fade show clearfix" id="publishedCongresses" role="tabpanel"
aria-labelledby="home-tab">
<ul class="list-group">
@foreach($congresses->filter(function ($item) { return $item->publishedCongresses(); }) as $congress)
<li class="list-group-item">
<p class="font-size-xsm"><i class="fa fa-calendar" aria-hidden="true"></i>
{{$congress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
<h5 class="card-title">
{{$congress->name}}</h5>
<a href="{{route('congress.manage', ['id' => $congress->id])}}" class="btn btn-outline-primary font-size-sm">Panel</a>
</li>
@endforeach
</ul>
<!-- Pagination div static for now-->
<div class="text-center mt-3">
<div class="col">
<nav aria-label="...">
<ul class="pagination d-flex justify-content-center">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">2</span>
<span class="sr-only">(current)</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="tab-pane fade show clearfix" id="pastCongresses" role="tabpanel"
aria-labelledby="home-tab">
<ul class="list-group">
@foreach($congresses->filter(function ($item) { return $item->pastCongresses(); }) as $congress)
<li class="list-group-item">
<p class="font-size-xsm"><i class="fa fa-calendar" aria-hidden="true"></i>
{{$congress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
<h5 class="card-title">
{{$congress->name}}</h5>
<a href="{{route('congress.manage', ['id' => $congress->id])}}" class="btn btn-outline-primary font-size-sm">Panel</a>
</li>
@endforeach
</ul>
<!-- Pagination div static for now-->
<div class="text-center mt-3">
<div class="col">
<nav aria-label="...">
<ul class="pagination d-flex justify-content-center">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">2</span>
<span class="sr-only">(current)</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
Try writing 3 separate custom paginators and pass the data (query string appends) as needed. Variables for each paginator would have to be named different.
I did a quick guide a while back on length aware paginator: https://laracasts.com/discuss/channels/tips/length-aware-paginator
Here's another article
https://christophersax.com/2016/custom-lengthawarepaginator-in-laravel/
Of course you can write your own small paginator and just have a next prev link.
It's just getting current page number and adding or subtracting 1.
I'd consider using some custom jquery ajax here, but that's your choice.
Please or to participate in this conversation.