adamjhn's avatar

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>

0 likes
3 replies
jlrdw's avatar

Have you tried using paginate instead of get?

1 like
adamjhn's avatar

Thanks, but the how to get the pagination in the view? WIth " {{$congresses->links()}}" dont shows nothing. But also I dont know if this approacoh works for this context because each foreach has a filter, one to get the draft congresses, other to get the published congresses and other to show the past congresses.

jlrdw's avatar
jlrdw
Best Answer
Level 75

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.

1 like

Please or to participate in this conversation.