LaravelのbladeとIlluminate\Pagination\LengthAwarePaginatorインスタンスでカスタムページネーションを実装する。

目的

S3の画像を一覧表示したい

流れ

S3にあるオブジェクトURLを保存しているDBから配列でオブジェクトURLを取得→その配列をページネーションする。

＃LengthAwarePaginatorクラスを使うときは、自分で配列かコレクションを分割しなければならない。配列ならarray_slice、コレクションならforpageなど。

1. bladeで表示する準備

・ページネーション済みの配列を回して、s3に保存されている画像を一覧表示させている。

<div class="container">
   @foreach ($s3ImgUrls as $objectrl)
       <img src="https://S3バケット名.s3-リージョン名.amazonaws.com/{{ $objectUrl }}" >
   @endforeach
</div>

{{ $s3imgUrls->links('vendor/pagination/semantic-ui') }}

links() では、以下のコマンドで生成されたview/vender/pagination内のいくつかあるbladeの一つを指定している。

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

2. bladeで表示させるページネーションされた`$s3imgUrls` を生成する。

ポイントは、リクエストされたページ数によってarray_slice()で切り取る範囲を変えているところ。

$array = //独自ペジネータ配列の全体像
$display_limit = 3
$arrayOfNum = ((int)($request->page ?? 1) - 1) * $display_limit;
$sliced_items = array_slice($array, $arrayOfNum, $display_limit);

$s3ImgUrls = new LengthAwarePaginator(
            $sliced_items, 　　 　// 現在のページのsliceした情報(items)
            count($array),       // 総件数（total）
            $display_limit,      // １ページに表示される数 (perPage)
            $currentPage,        // 現在のページ(ページャーの色がActiveになる)（currentPage）
            ['path' => $url]     // ページャーのリンクを指定
        );

3. bladeのcssを整える。

以下のようなページネーションが作れる。