Laravelのページネーションが横方向にはみ出る問題の解決方法(レスポンシブ対応)

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 データベース:ペジネーション

https://readouble.com/laravel/6.x/ja/pagination.html

非常に便利な機能である一方で、対象となるレコード件数が多いときにはページネーションが横長になり過ぎてしまい、スマホなど画面幅の小さいデバイスで閲覧したときにページネーションが画面から横方向に飛び出てしまって困る。

ページネーションは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でサイズを調整するとかもアリかも。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です