LoginSignup
2
1

More than 5 years have passed since last update.

Laravel5のページネーションにBulmaを使用する方法

Last updated at Posted at 2017-05-15

UIKitならばライブラリを用いてちょっと楽ができましたが、Bulmaはそんなものないので、
自前でゴリゴリ書いてBulma仕様にしなくてはいけません。
その自前で書く時間が惜しい人用に私の書いたソースコードを公開します。
転載自由ですが使用は自己責任でお願いします。

実装

ターミナルで以下のコマンドを実行し、必要ファイルを生成します

php artisan vendor:publish --tag=laravel-pagination
vim resources/views/vendor/pagination/default.blade.php

以下の内容を丸ごとコピペでおk

resources/views/vendor/pagination/default.blade.php
@if ($paginator->hasPages())
    <ul class="pagination-list">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li><span class="pagination-previous" disabled="disabled">&laquo;</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="pagination-previous">&laquo;</a></li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li><span class="pagination-ellipsis">{{ $element }}</span></li>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li><span class="pagination-link is-current">{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}" class="pagination-link">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next" class="pagination-next">&raquo;</a></li>
        @else
            <li><span class="pagination-next" disabled="disabled">&raquo;</span></li>
        @endif
    </ul>
@endif

デモ

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1