Tuesday, February 20, 2018

laravel pagination with materialize css

Publishing pagination vendor using artisan command



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



make a file name materializecss.blade.php inside views/vendor/pagination directory and paste following code




@if ($paginator->hasPages())


    <ul class="pagination">


        {{-- Previous Page Link --}}


        @if ($paginator->onFirstPage())


            <li class="disabled"><i class="material-icons">chevron_left</i></li>


        @else


            <li class="waves-effect"><a href="{{ $paginator->previousPageUrl() }}"><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">{{ $element }}</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 class="page-link" 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 href="{{ $paginator->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>


        @endif


    </ul>




@endif








In order to use in views




    {{$variable->links('vendor.pagination.materializecss')}}





css snippet for blogger code highlighting

code, .code {     display: block;     background: beige;     padding: 10px;     margin: 8px 15px; }