Laravel 5.3でページネーションのビューを変更する



Laravel 5.3でページネーションのデザインを変更する方法の紹介です。

PHPで人気のWebフレームワーク"Laravel"も5.3がリリースされて、 幾つかの変更や機能が追加されました。その中の1つでページネーションのデザイン変更も容易に出来るようになりました。

LaravelではView側でページネーション用のリンクが作成できる関数が用意されていますが、デフォルトで用意されているページネーションはTwitter bootstrap用です。

* デフォルトで容易されているページネーション (Bootstrap 3用)

プロジェクトのテンプレートにBootstrapが使われていれば問題ありませんが、カスタムCSSや その他CSSフレームワークを使われているとレイアウトが崩れる心配があります。

っということで、Laravel 5.3でページネーションのデザインの変更をしましょう!

artisanコマンドを使ってページネーション用のデザインページを発行する

Laravel 5.3以前でページネーションのデザインを変更すには、ページネーション用のViewを作る必要がありましたが、5.3からはコマンド1つででページネーションの雛形を生成してくれるようになりました。

まずは、コマンドライン上から下記のコマンドを打ってページネーション用のテンプレートを発行します。

# pagination用のテンプレート'resources'フォルダ内に発行
$ php artisan vendor:publish 
# コマンド実行時に表示されるメッセージ
#Copied Directory [/vendor/laravel/framework/src/Illuminate/Notifications/resources/views] To [/resources/views/vendor/notifications]
#Copied Directory [/vendor/laravel/framework/src/Illuminate/Pagination/resources/views] To [/resources/views/vendor/pagination]
#Publishing complete for tag []!

上記のコマンドを打つと ' resouces/views' フォルダ内に'vendor'ディレクトリが自動作成され、その中の'pagination'フォルダ内のファイルがページネーション用のViewファイルになります。
( Laravel 5.3ではBootstrap3とBootstrap4用のページネーションテンプレートが用意されています )

# resources/views
- vendor
  - notifications
  - pagination
      bootstrap-4.blade.php
      default.blade.php
      simple-bootstrap-4.blade.php
      simple-default-blade.php


paginationフォルダ内にファイルが作成させましたが、下記のようにeloquentやqueryビルダーでpaginationの機能を使った場合、'default.blade.php'のテンプレートが呼び出されます。

// Controllerのサンプル
public function get_index()
{
   return view('example')
           ->with('article', ArticleModel::paginate());
}

// Viewのサンプル 
// links()でページネーションが作成されます
{{ $article->links() }}
{{-- pagination/default.blade.php  --}}
<ul class="pagination">
    <!-- Previous Page Link -->
    @if ($paginator->onFirstPage())
        <li class="disabled"><span>&laquo;</span></li>
    @else
        <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
    @endif

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

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

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


もしbootstrap4用のページネーションを使いたい場合はView内で使うlinks()関数内の引数にテンプレートのパスを入れれば適応されます。

{{-- bootstrap4用のページネーションを使う場合  --}}
{{ $article->links('vendor.pagination.bootstrap-4') }}

bootstrap4用のページネーション


ページネーションのデザインを変更 

Laravel5.3にはデフォルトでBootstrap用のページネーションは用意されていますが、その他CSSフレームワーク様のページネーションもデフォルトのテンプレートを流用すれば簡単に作成できます。

っということで、人気CSSフレームワーク、”Materialize"用と"Foundation"用のページネーションを作成してみました!

Materialize用

{{-- resources/views/vendor/pagination/materialize.blade.php  --}}
<ul class="pagination">
    <!-- Previous Page Link -->
    @if ($paginator->onFirstPage())
      <li class="disabled">
        <a href="#!"><i class="material-icons">chevron_left</i></a>
      </li>
    @else
          <li >
            <a href="{{ $paginator->previousPageUrl() }}" rel="prev"><i class="material-icons">chevron_left</i></a>
          </li>

    @endif

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

        <!-- Array Of Links -->
        @if (is_array($element))
            @foreach ($element as $page => $url)
                @if ($page == $paginator->currentPage())
                    <li class="active"><a>{{ $page }}</a></li>
                @else
                    <li class="waves-effect"><a href="{{ $url }}">{{ $page }}</a></li>
                @endif
            @endforeach
        @endif
    @endforeach

    <!-- Next Page Link -->
    @if ($paginator->hasMorePages())
        <li class="waves-effect"><a href="{{ $paginator->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>
    @else
        <li class="disabled"><a><i class="material-icons">chevron_right</i></a></li>
    @endif
</ul>
{{-- テンプレート上で使う場合  --}}
{{ $article->links('vendor.pagination.materialize') }}

Materialize用のページネーション

Foundation用

{{-- resources/views/vendor/pagination/foundation.blade.php  --}}
<ul class="pagination" role="navigation" aria-label="Pagination">
    <!-- Previous Page Link -->
    @if ($paginator->onFirstPage())
        <li class="pagination-previous disabled"><span>Prev</span></li>
    @else
        <li class="pagination-previous"><a href="{{ $paginator->previousPageUrl() }}" rel="prev">Prev</a></li>
    @endif

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

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

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

    @endif
</ul>
{{-- テンプレート上で使う場合  --}}
{{ $article->links('vendor.pagination.foundation') }}

Foundation用のページネーション


Summary 

Laravel 5.3でカスタムページネーションを作成する説明は以上です。

5.3からは簡単にページネーションのデザインが変更出来るので、デザインの一部にfont-awesomeのアイコンを使ったり、カスタムCSSデザインを割り当てることも簡単に出来ます。

Laravelプロジェクトでページネーションはよく使う機能の1つなので、Bootstrap以外のCSSフレームワークを使う時は覚えておきたい機能ですね!

Laravel Document: Customizing The Pagination View

 

この記事のカテゴリ
プログラミング

この記事のタグ