Избегайте обновления страницы при нумерации страниц Laravel - PullRequest
0 голосов
/ 15 октября 2019

Я хочу избежать обновления страницы, когда я переключаю страницы, используя нумерацию страниц из Laravel, потому что, когда я переключаю страницу 1 на страницу 2, я перенаправляюсь на родительскую страницу. Как я могу избежать перезагрузки страницы при смене страниц? У меня есть 2 вкладки на Invitation - Received и Initiated. На Initiated у меня есть нумерация страниц, когда я нажимаю на странице 2, например, я перенаправлен на родительскую страницу, которая является Invitation, мне нужно оставаться на странице Initiated, когда я переключаю страницу с нумерации страниц. Вот мой контроллер:

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

Вот мой взгляд:

<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>

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Прежде всего, я думаю, вы должны знать, как работает разбиение на страницы.

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

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

обычно вы можете сделать только {{ $initiated->links() }}, но когда у вас есть специальные параметры, которые вам нужно передать, вы должны также объединить запроспараметры для нумерации страниц, поэтому каждая ссылка, которая имеет нумерацию страниц, будет иметь необходимые параметры.

больше документации вы найдете здесь в разделе Appending To Pagination Links. Если вы реализуете это разбиение на страницы, вы больше не получите перенаправление родителей. Я также вижу, что вы выполняете один и тот же цикл foreach с одинаковыми данными на двух вкладках, и я думаю, что это тоже проблема, потому что вы не можете иметь две разные нумерации страниц для одних и тех же данных. Может быть, в контроллере вы можете сделать что-то вроде

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

Это не очень хорошо для решения, но, возможно, вы попробуете это и посмотрите, изменит ли это способ работы вашего кода. Также вам нужно отрегулировать нумерацию страниц для

Надеюсь, это поможет, и вы можете заставить его работать.

0 голосов
/ 15 октября 2019

Разбиение на стороне сервера требует изменения параметра маршрута, поэтому это не «обновление страницы»

Вы можете использовать Ajax для выполнения ручного запроса при нажатии кнопки нумерации страниц

Что-то вроде этого (не рекомендуется)

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

И использование 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"));
    });
});

Это попытка сделать то, для чего были созданы TurboLinks, поэтому я рекомендую использовать вместо этого

Или сделать вашвсе приложение SPA с Vue Router, например, если вы используете Vue

Но самое простое решение - это использовать Turbo Links

Это перехватит перенаправление страницы и сделаетXHR, чтобы получить весь возврат HTML laravel и заменить его текущим представлением

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...