Avoid refreshing page at pagination Laravel

Question

I want to avoid refreshing page when I switch the pages using pagination from Laravel because when I switch the page 1 to page 2, I'm redirected to parent page. How can I avoid reloading page when I change the pages? I have 2 tabs at Invitation - Received and Initiated. On Initiated, I have pagination, when I press on page 2 for example, I'm redirected to the parent page which is Invitation, I need to remain on the page Initiated when I switch the page from pagination. Here is my controller:

$initiated =  \App\Invitation::with('user')
    ->where('inviter_id', Sentinel::getUser()->id)
    ->orderBy('id', 'desc')
    ->paginate(6);

Here is my view:

<div id="initiated" class="profile-edit tab-pane fade" style="background: none repeat scroll 0 0;">
    <dl class="dl-horizontal">
        <ul class="nav justify-content-center u-nav-v5-3 u-nav-primary  " role="tablist"
            data-target="nav-5-3-primary-hor-center" data-tabs-mobile-type="slide-up-down"
            data-btn-classes="btn btn-md btn-block u-btn-outline-primary"
            style="display: flex;justify-content: flex-end;">
            <li class="nav-item active">
                <a a data-toggle="tab" href="#grid" style="font-size: 12px"><i class="fa fa-th-large"></i> Grid</a>
            </li>
            <li class="nav-item">
                <a a data-toggle="tab" href="#list" style="font-size: 12px"><i class="fa fa-bars"></i> List</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="grid" class="tab-pane fade in active">
                <?php $count_user = 0;
         ?>
                @foreach($initiated as $record)
                @if($count_user == 0)
                <div class="row margin-bottom-20 ">
                    @endif
                    <?php $count_user++; ?>
                    <div class="col-sm-6 sm-margin-bottom-20">
                        <div class="profile-blog">
                            <img style="border-radius: 0% !important" class="rounded-x"
                                src="{{ asset('thumbnail') }}/{{ $record->user ? $record->user->profile_picture : '' }}"
                                alt="">
                            <div class="name-location" style="top: 30px;position: relative">
                                @if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug : '')
                                <i style="font-size: 13px;position: relative;" class="icon-user"></i>
                                @elseif($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug :
                                '')
                                <i style="font-size: 13px;position: relative;"
                                    class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"></i>
                                @endif
                                <a id="my-link" style="color: #555;text-decoration: none;font-size: 16px"
                                    href="{{ url('') }}/{{ $record->user ? $record->user->username : '' }}">{{ $record->user ? $record->user->username : '' }}</a>
                                </h3>
                            </div>
                            <div class="clearfix "></div>
                            <strong style="font-size: 13px"><i style="padding: 5px"
                                    class="icon-real-estate-020 u-line-icon-pro"></i>Location :
                            </strong>{{ $record->user ? $record->user->country->country : '' }} <span
                                class="{{ $record->user ? $record->user->country->flag : '' }}"></span><br>
                            <strong style="font-size: 13px"><i style="padding: 5px"
                                    class="icon-notebook fa-"></i>Industry :
                            </strong>{{ $record->user ? $record->user->industry->industry : '' }}<br>
                            @if($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug : '')
                            @if(isset($record->user->organization_type->organization_type))
                            <strong style="font-size: 13px"><i
                                    class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"
                                    style="padding: 5px;font-size: 13px"></i>Organization :
                            </strong>{{ $record->user ? $record->user->organization_type->organization_type : '' }}@endif
                            @endif
                            @if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug : '')
                            @if(!empty($record->user->career_path[0]))
                            <strong style="font-size: 13px"><i class="icon-speedometer"
                                    style="padding: 5px"></i>Function :
                            </strong>{{ $record->user ? $record->user->career_path[0]->functions->function : '' }}@endif
                            @endif
                            <hr>
                            <ul class="list-inline share-list">
                                <li>
                                    <a href="/cancel-invitation/{{$record->id}}"><i class="fa fa-times"> </i>Cancel</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    @if($count_user == 2)
                </div>
                <?php  $count_user = 0; ?>
                @endif
                @endforeach
            </div>
            <div id="list" class="tab-pane fade">
                <?php $count_user = 0;
         ?>
                @foreach($initiated as $record)
                @if($count_user == 0)
                <div class="row">
                    @endif
                    <?php $count_user++; ?>
                    <div class="col-sm-12 sm-margin-bottom-20" style="margin-bottom: 12px">
                        <div class="profile-blog" style="padding: 5px">
                            <img style="margin-right: 10px"
                                src="{{ asset('thumbnail') }}/{{ $record->user ? $record->user->profile_picture : '' }}"
                                alt="">
                            <div class="name-location">
                                <h3> @if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug :
                                    '')
                                    <i style="font-size: 13px;position: relative;" class="icon-user"></i>
                                    @elseif($record->user->role[0]->slug == 'organizations' ?
                                    $record->user->role[0]->slug : '')
                                    <i style="font-size: 13px;position: relative;"
                                        class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"></i>
                                    @endif <a id="my-link" style="color: #555;text-decoration: none;font-size: 16px"
                                        href="{{ url('') }}/{{ $record->user ? $record->user->username : '' }}">{{ $record->user ? $record->user->username : '' }}</a>
                                </h3>
                                <ul class="list-inline share-list d-flex pull-right"
                                    style="bottom: 25px;position: relative;margin-bottom: -20px;left: -25px">
                                    <li style="left: 25px;position: relative">
                                        <a href="/cancel-invitation/{{$record->id}}"><i
                                                class="icon-custom-me rounded fa fa-times"> </i></a>
                                    </li>
                                </ul>
                            </div>
                            <div style="display: flex;right: 2px;position: relative;bottom: 12px;margin-bottom: -10px">
                                <div style="padding-right: 15px">
                                    <strong><i class="icon-real-estate-020 u-line-icon-pro"></i> :
                                    </strong>{{ $record->user ? $record->user->country->country : '' }} <span
                                        class="{{ $record->user ? $record->user->country->flag : '' }}"></span>
                                </div>
                                <div style="padding-right: 10px">
                                    <strong><i class="icon-screen-tablet fa-"></i> :
                                    </strong>{{ $record->user ? $record->user->industry->industry : '' }}
                                </div>
                                <div style="padding-right: 10px">
                                    @if($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug :
                                    '')
                                    @if(isset($record->user->organization_type->organization_type))
                                    <strong><i class="icon-speedometer"></i> :
                                    </strong>{{ $record->user ? $record->user->organization_type->organization_type : '' }}
                                    @endif
                                    @endif
                                </div>
                                <div style="padding-right: 10px">
                                    @if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug :
                                    '')
                                    @if(!empty($record->user->career_path[0]))
                                    <strong><i class="icon-frame fa-"></i> :
                                    </strong>{{ $record->user ? $record->user->career_path[0]->functions->function : '' }}
                                    @endif
                                    @endif
                                </div>
                            </div>
                            </ul>
                        </div>
                    </div>
                    @if($count_user == 2)
                </div>
                <?php  $count_user = 0; ?>
                @endif
                @endforeach
            </div>
        </div>
    </dl>
    {!! $initiated->render() !!}
</div>

Answer 1

first of all i think you should know how the pagination works.

@foreach ($initiated as $record)
    ....
@endforeach

{{ $initiated->appends(array_merge(request()->all()))->links() }}

normally you can do only {{ $initiated->links() }} but when you have special params that you need to pass you should also merge the request parameters to the pagination, so every link that the pagination has, will have the parameters that you need.

more documentation you find here under the Appending To Pagination Links section. If you implement this pagination you will no longer get the parent redirect. I also see that you are doing the same foreach loop with the same data in the two tabs and I think this is also a problem, because you can't have 2 different pagination on the same data. Maybe in the controller you can do something like

$initiated_tab_1 = ... ;
$initiated_tab_2 = $initiated_tab_1;

This is not to nice for a solution, but maybe you try it and see if this changes the way you code works. Also you need to adjust the pagination for

I hope this helps and you can get it working.

Answer 2

Server-side pagination requires changing route parameter, therefore it's not "page refresh"

You could either use Ajax to perform a manual query on pagination button number click

Something like this (not recommended)

<div id="users">
    @foreach ($users as $user)
    <h2>{{ $user->name }}</h2>
    @endforeach
</div>
{{ $users->links() }}

And using JQuery Ajax

$('.pagination a').on('click', function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $.get(url, function (data) {
        $('html').html(data.replace(/<html>(.*)<\/html>/, "$1"));
    });
});

This attempts to do what TurboLinks was made for, so I recommend using that instead

Or make your entire app an SPA with Vue Router for example if you're using Vue

But the easiest solution is to use Turbo Links

This would intercept page redirect and make an XHR to grab the entire HTML laravel returns and swap it with the current view

Hope this helps