Разбить одну страницу на разные вкладки Laravel

Я хочу разбивать в блейд-файле разные вкладки, на каждой вкладке отображаются разные наборы объектов, но каждый раз, когда я перехожу на следующую страницу на одной странице, она перенаправляется на первую вкладку, а также разбивает на страницы каждую вкладку, а не только ту, которую я хотел разбить на страницы.

Блейд-часть, где у меня есть вкладки

    <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-адрес.


person Gianluca Rea    schedule 31.05.2020    source источник
comment
Вы хотите открывать новую вкладку при нажатии на ссылку пагинации?   -  person sta    schedule 31.05.2020
comment
Когда я нажимаю «Далее» на ссылку разбивки на страницы, я хочу открыть ту же страницу с той же вкладкой, открытой со следующей страницей разбивки на страницы этой вкладки. Проблема в том, что при перезагрузке разбиения на страницы он переходит на активную страницу (дасборд в коде), и разбиение на страницы влияет на другие вкладки. Я хочу разбить на страницы только эту конкретную вкладку   -  person Gianluca Rea    schedule 31.05.2020
comment
Тогда вам нужно сделать это с помощью ajax. Иди на Datatables это тебе поможет. На github есть самый пакет yajra/laravel-datatables. Вы можете попробовать это   -  person sta    schedule 31.05.2020


Ответы (2)


Решение выглядит так.

Код навигации:

<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'); 
person UXSign    schedule 31.05.2020
comment
Спасибо большое все работает!!! В любом случае, я также изменил href в <div class="myaccount-tab-menu nav" и удалил переключатель данных, чтобы сделать полную работу, как я хотел (каждый раз, когда вы нажимаете на вкладку, загружается другой URL-адрес) - person Gianluca Rea; 31.05.2020

Он перенаправляет на первую вкладку, потому что вы используете вкладки javascript с классом active, добавленным на первую вкладку. Чтобы решить проблему с вкладками, вам нужно изменить для каждой вкладки навигацию на: <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 решения:

  1. Используйте вкладки JS и получайте данные через запрос Ajax.
  2. Используйте 4 отдельных маршрута для каждой коллекции и добавьте маршруты на вкладки, соответствующие приведенному выше примеру.

Я надеюсь, что это было ясно.

person UXSign    schedule 31.05.2020
comment
‹a href=#dashboad class={{ (Route::currentRouteName() == 'ВАШЕ-ИМЯ-МАРШРУТА) ? 'active' : '' }} что именно делает этот код? - person Gianluca Rea; 31.05.2020
comment
Я покажу вам, как сделать ваши вкладки активными в зависимости от URL-адреса вашего браузера. Этот код {{ (Route::currentRouteName() == 'YOUR-ROUTE-NAME) ? 'active' : '' }} предназначен для отображения активной строки, если текущее имя маршрута браузера равно ВАШЕМУ-ИМЯ-МАРШРУТА, маршруту, определяющему вашу кнопку. Например: <a href="#dashboad" class="{{ (Route::currentRouteName() == 'dashboard') ? 'active' : '' }}" data-toggle="tab"><i class="fa fa-dashboard"></i>Dashboard</a>, но вам нужно определить маршрут с панелью имен. - person UXSign; 31.05.2020
comment
Итак, для решения 2 мне нужно создать 4 отдельных маршрута, по одному для каждого currentRouteName () == 'myroutename', и отправить им только коллекцию для разбиения на страницы? - person Gianluca Rea; 31.05.2020
comment
В любом случае решение, которое вы предоставили, просто позвольте мне увидеть пустую страницу без выбранной вкладки в тот момент, когда я перезагружаю или делаю следующую страницу. - person Gianluca Rea; 31.05.2020