Laravel9でPaginationを簡単に美しく実装する方法【Tailwind CSS利用】

Laravel Breeze

LaravelはJavascriptをいじらなくても、簡単にページネーションを使えます。

ただTailwind CSSのデフォルトのページネーションは、日本語がちょっとおかしかったり、現在のページに色が着かなかったりと残念なところがあります。

こういった部分を修正し、Laravel9でTailwind CSSを使って、簡単に美しくページネーションを搭載する方法を紹介します。

*なおBootstrapご利用の場合は、下記をご覧ください。

Laravel9でPaginationを簡単に美しく実装する方法【Tailwind CSS利用】

今回実施したいこと

  • お問い合わせ一覧を載せたページにページネーション機能を付ける
  • 各ページには10個ずつお問い合わせを掲載する

手順は次のとおりです。

①コントローラーでpaginate関数を使う

ページネーションを表示したいビューのコントローラの一番上に、次のuse宣言を入れておきます。

ページネーションを入れる部分には、次のように記述します。

$変数名=クラス名::paginate(1ページの件数);

たとえば Inquiryクラスを使い、1ページに10件ずつ表示したい場合には、次のようにします。

コード例は次のようになります。

*別途ルート設定も必要になります。

②ビューファイルに記述

ビューファイルには、リストの下に次のように入れます。

{{ 変数名(複数形)->links() }}

リスト部分を簡略化すると、コード全体は次のようになります。

これでOK、といきたいところですが、このままだと、下記のようなおかしな表示になります。

また、現在のページに色がつきません。

これから修正していきます。

③pagination用ファイルを発行

下記コマンドを入力します。

resources/views/vendor/paginationの中に、ページネーション用のファイルができます。

resources/views/vendor/pagination/tailwind.blade.phpファイルをコピーし、tailwind2.blade.phpとしておきます。

④ pagination用ファイルを編集

作成したtailwind2.blade.phpを編集します。

★を付けた箇所が修正箇所です。お好みに応じて、変更してくださいね。

【resources/views/vendor/pagination/tailwind2.blade.php】

 

⑤ ページネーション用リンクの変更

②で作成したページネーション用のリンクを、下記のように変更しておきます。

 

⑥ ブラウザに表示

npm run watch または npm run devを行ってください。

ブラウザに表示してみます。下記のようになります。

さいごに:Laravelのページネーションへのぼやきと称賛

以上となります。

Bootstrap版のところでもぼやきましたが、Laravelのページネーションは素晴らしいのですが、今ひとつ惜しいところがあります。

今回は、惜しいところの修正方法をご紹介しましたが、この一手間をかけずにいけると良いな、と思います^^;

 

なおLaravelの使い方を学びたい!という場合には、学習サイト【Laravelの教科書】でご紹介しています。

Laravel Breezeパッケージ(TailwindCSS利用)を使って、フォーラムサイトを作っていく内容です。ご興味あれば、こちら見てみてください。

を見てみてくださいね。

Laravelの教科書について詳しく知る

Junko
Junko

基礎編は無料です。

Laravel Breeze Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました