LaravelにはDBから取得したレコード件数が多いときに自動でページネーションを作ってくれる機能がある。
app/HogeController.php
public function index() {
// 1ページあたりの表示人数は10人
$users = User::select('*')->where('age', '>=', '20')->paginate(10);
return view('/', ['users' => $users]);
}
resouces/views/hoge.blade.php
@foreach ($users as $user)
{{ $user->name }}
@endforeach
// この記述だけでページネーションを挿入できる
{{ $users->links() }}
Laravel 6.x データベース：ペジネーション
非常に便利な機能である一方で、対象となるレコード件数が多いときにはページネーションが横長になり過ぎてしまい、スマホなど画面幅の小さいデバイスで閲覧したときにページネーションが画面から横方向に飛び出てしまって困る。
ページネーションはFlexboxだが、デフォルトでは折返ししないことが原因(flex-wrapの値が設定されていない = デフォルトのnowrapとなっている)。
Laravelのページネーションをレスポンシブ対応する方法
逆に言えば、折り返すように設定してやれば画面からはみ出ることはなくなる。
コード
# "resources/views/vendor"にpagination用のBladeファイルをコピー
$ php artisan vendor:publish --tag=laravel-pagination
flex-wrapをwrapに設定すればOK。
resources/views/vendor/bootstrap-4.blade.php
@if ($paginator->hasPages())
@endif
もしくは、画面幅が一定サイズを下回ったら「前へ」と「次へ」ボタン以外は消してしまうといった方法もある。
他にはCSSでサイズを調整するとかもアリかも。