2019-05-02に更新

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

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

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

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

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

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

レスポンシブ対応

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

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

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

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント