BootstrapのPaginationをレスポンシブに対応する [Laravel]
BootstrapのPagination(ページネーション)をレスポンシブウェブデザインに対応する方法です。レスポンシブはパソコンの場合は通常表示、スマートフォンはページネーションの表示件数を減らします。
結果
<パソコン>
<スマートフォン>
1. 環境
Laravel6系 + PHP + Bootstrap4系
2. 対応方法
LaravelのページネーションにはonEachSide()がありますが、これは「現在のページ」(中央)の左右のリンク数を制御するものです。左端や右端の設定項目は存在しないようです。
{{ $users->onEachSide(5)->links() }}
ですので、Bootstrapのテンプレートをコピペして書き換える事になります。
2-1. Bootstrapのテンプレートビュー
Bootstrapのテンプレートビューは次の場所にあります。
vendor\laravel\framework\src\Illuminate\Pagination\resources\views\bootstrap-4.blade.php
これをコピペして次の場所に配置します。
resources\views\pagination\bootstrap-4.blade.php
2-2. テンプレートビューの編集
次はLaravelのバージョンが6系の場合です。それ以外のバージョンでは確認していませんが、参考にはなると思います。
[bootstrap-4.blade.php]
@if ($paginator->hasPages()) <nav class="pc"> <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">‹</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a> </li> @endif {{-- Pagination Elements --}} @foreach ($elements as $element) {{-- "Three Dots" Separator --}} @if (is_string($element)) <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li> @endif {{-- Array Of Links --}} @if (is_array($element)) @foreach ($element as $page => $url) @if ($page == $paginator->currentPage()) <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li> @else <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li> @endif @endforeach @endif @endforeach {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"> <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">›</span> </li> @endif </ul> </nav> <nav class="sp"> <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">前へ</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">前へ</a> </li> @endif {{-- Pagination Elements --}} @foreach ($elements as $element) {{-- Array Of Links --}} @if (is_array($element)) @foreach ($element as $page => $url) {{-- アクティブ --}} @if ($page == $paginator->currentPage()) <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li> @else {{-- 最初のページ --}} @if ($page == 1) <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li> <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> @endif {{-- 最後のページ --}} @if ($page == $paginator->lastPage()) <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li> @endif @endif @endforeach @endif @endforeach {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"> <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">次へ</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">次へ</span> </li> @endif </ul> </nav> @endif
要約すると次のような感じです。
// ココはパソコンのみ表示 <nav class="pc"> </nav> // ココはスマートフォンのみ表示 <nav class="sp"> </nav>
HTMLには2個のページネーションを出力しますが、表示されるのは1個。
2-3. CSS - レスポンシブの設定
pc、spのclassの設定です。微調整は各自で行ってください。
/* Media Queries 769px以上 */ @media screen and (min-width: 769px){ .pc{ } .sp{ display:none; } } /* Media Queries 768px以下 */ @media screen and (max-width:768px){ .pc{ display:none; } .sp{ } }
2-4. ビュー側の設定
先程のテンプレート名をlinks()で設定するだけです。
{{ $items->links('pagination.bootstrap-4') }}
※onEachSide()は使う必要はないと思われます。(未使用)
2-5. コントローラー側の設定
特にありません。paginate()を呼び出してviewに設定するだけです。
$items = $items->paginate(50); return view('hoge.index', ['items' => $items]);
2-6. ページネーション用の文言
ページネーションで「全100件中 1 - 25件の質問が表示されています。」と表示する [Laravel]
最後に
今回のスマートフォンの横幅は360pxを基準にしています。320pxでも綺麗に表示させたい場合は「前へ」「次へ」の文字を減らすと良いです。
関連記事
前の記事: | CakePHP + Vue CLI(Vue.js + Axios)でCRUDのサンプルプロジェクト (学習用) |
次の記事: | CakePHP 3.9.xから4.3.xへアップグレード [エラー解決/移行ガイド] |