Skip to content

Instantly share code, notes, and snippets.

@tompec
Last active September 10, 2020 20:33
Show Gist options
  • Save tompec/cd4051aafebd3c150c72771902746821 to your computer and use it in GitHub Desktop.
Save tompec/cd4051aafebd3c150c72771902746821 to your computer and use it in GitHub Desktop.
Bulma blade template for Laravel 5.4 pagination
@if ($paginator->hasPages())
<nav class="pagination is-centered">
@if ($paginator->onFirstPage())
<a class="pagination-previous" disabled>Previous</a>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="pagination-previous">Previous</a>
@endif
@if ($paginator->hasMorePages())
<a class="pagination-next" href="{{ $paginator->nextPageUrl() }}" rel="next">Next</a>
@else
<a class="pagination-next" disabled>Next page</a>
@endif
<ul class="pagination-list">
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li><span class="pagination-ellipsis"><span>{{ $element }}</span></span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li><a class="pagination-link is-current">{{ $page }}</a></li>
@else
<li><a href="{{ $url }}" class="pagination-link">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
</ul>
</nav>
@endif
@vklepper
Copy link

Thanks !

@jullespio
Copy link

This is amazing @tompec, saved me a lot of work! Works with bulma 0.70

@AmrAlfoly
Copy link

Thanks man

@apomarinov
Copy link

Thanks!

@dejong-jelmer
Copy link

dejong-jelmer commented May 14, 2019

Really useful, thx allot!
In my case I needed a little more flexibility, and also needed some translation. Luckily the links() method accepts a data array, so I have added the following code to <nav class=”pagination”> element:

<nav class="pagination @isset($bulmaClasses) {{ $bulmaClasses }} @else is-centered @endisset">

And to the anchor tags:

@if ($paginator->onFirstPage())
    <a class="pagination-previous" disabled>@if(!empty($previous)) {{ $previous }} @else Previous @endif</a>
@else
    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="pagination-previous">@isset($previous) {{ $previous }} @else Previous @endisset</a>
@endif

and:

@if ($paginator->hasMorePages())
    <a class="pagination-next" href="{{ $paginator->nextPageUrl() }}" rel="next">@isset($next){{ $next }}@else Next @endisset</a>
@else
    <a class="pagination-next" disabled>@isset($next){{ $next }}@else Next page @endisset</a>
@endif

So now I can include it like this:
$data->links('vendor.pagination.bulma', ['bulmaClasses' => 'is-small is-centered', 'next' => '/*text for next button*/', 'previous' => '/*text for previous button*/'])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment