Laravelのページネーションをレスポンシブ対応する

Laravelではクエリ実行時にgetじゃなくてpaginateメソッドを呼んでデータを取得することで、テンプレート側で$posts->links()とするだけでBootstrap4のページネーションのリンク一覧を表示することができる。

便利ではあるのだが、ページ数が増えると非常に横長になり、スマホ表示の場合は画面からはみ出しておかしくなってしまう。

この対処として、Laravel5.7から

{{ $users->onEachSide(5)->links() }}

のようにすることで表示するページ番号数を調整することができるようになった。これは良いと思って試してみたのだが、最小の１にしてもたいして減らず、相変わらず画面からはみ出してしまう。このためだけに頑張って5.6から5.8に上げたのにもかかわらずだ。

レスポンシブ対応

仕方がないのでレスポンシブ対応することにした。具体的には公式マニュアルに書いてあるように

php artisan vendor:publish --tag=laravel-pagination

としてテンプレートをアプリケーション側に吐き出し、それを修正することで表示を調整することができるようになっている。なのでページ番号と「…」のところのspanとaタグのクラスにd-none d-md-blockを追加することで、スマホ表示の場合は前のページと次のページへのリンクだけを表示するようにすることで対処した。

まあ、本来はCSS書いた方がスマートな気がするけど。