LaravelにはJavascriptをいじらなくても、簡単にページネーションを使えます。
ただLaravel8ではデフォルトのCSSフレームワークがBootstrapからTailwind CSSになったので、表示がおかしくなることも。
Bootstrapを使って、簡単に美しくページネーションを搭載する方法を紹介します。
*Tailwind CSSの場合は、下記をご覧ください。
Laravel8 でPaginationを簡単に美しく実装する方法
今回実施したいこと
- お問い合わせ一覧を載せたページにページネーション機能を付ける
- 各ページには10個ずつお問い合わせを掲載する
手順は次のとおりです。
①コントローラーでpaginate関数を使う
ページネーションを表示したいビューのコントローラの一番上に、次のuse宣言を入れておきます。
use Illuminate\Pagination\Paginator;
ページネーションを入れる部分には、次のように記述します。
たとえば Inquiryクラスを使い、１ページに10件ずつ表示したい場合には、次のようにします。
$inquiries=Inquiry::paginate(10);
コード例は次のようになります。
*別途ルート設定も必要になります。
②ビューファイルに記述
ビューファイルには、リストの下に次のように入れます。
{{ $inquiries->links() }}
リスト部分を簡略化すると、コード全体は次のようになります。
③pagination用のCSSを入れる
下記コマンドを入力します。
php artisan vendor:publish --tag=laravel-pagination
resources/views の中に venderフォルダができます。
そのなかにpagination用のファイルが入っています。
④Bootstrap使用を設定
これでOK・・・といきたいところですが、Laravel8では、どうやらこのままでは表示がおかしくなります。
原因は、デフォルトのCSSフレームワークが変わったためだと推測されます。
Laravel7まではBootstrapがデフォルトでしたが、Laravel8からはTailwindがデフォルトになりました。
Bootstrap4を使用する場合は、app/Providers AppServiceProvider.php を編集する必要があります。
ファイルの上部に下記のuse宣言を追加します。
use Illuminate\Pagination\Paginator;
bootには、次のように記述します。
Paginator::useBootstrap();
すると、こんな感じの外観になります。
色々カスタマイズしたい場合は、公式マニュアルの下のほうにあるページネーション情報も参考にしてください。
さいごに：Laravelのページネーションへのぼやきと称賛
Laravelのページネーション機能は、本当にラクです。
jQueryを編集したりせずにすんでありがたい！
ただ最後にひとつ不満を言うと、本記事④の設定プロセスがないと表示がどうもおかしくなること。
この設定なしでもいければな、と思います。
