Created
May 10, 2021 21:27
-
-
Save UzairQamarxyz/c5eb689b6e49f2d9d39cd4896bc9613d to your computer and use it in GitHub Desktop.
Laravel Livewire pagination in bulma CSS framework
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| @if ($paginator->hasPages()) | |
| <nav role="navigation" aria-label="Pagination Navigation" class="pagination"> | |
| <a class="pagination-previous" wire:click="previousPage" @if ($paginator->onFirstPage()) disabled @endif> | |
| {!! __('pagination.previous') !!} | |
| </a> | |
| <a class="pagination-next" wire:click="nextPage" @if (!$paginator->hasMorePages()) disabled @endif> | |
| {!! __('pagination.next') !!} | |
| </a> | |
| <ul class="pagination-list"> | |
| {{-- Previous Page Link --}} | |
| <li aria-label="{{ __('pagination.previous') }}"> | |
| <a class="pagination-link" wire:click="previousPage" aria-label="{{ __('pagination.previous') }}" @if ($paginator->onFirstPage()) disabled @endif> | |
| <span class="icon"> | |
| <i class="fas fa-chevron-left"></i> | |
| </span> | |
| </a> | |
| </li> | |
| {{-- Pagination Elements --}} | |
| @foreach ($elements as $element) | |
| {{-- "Three Dots" Separator --}} | |
| @if (is_string($element)) | |
| <span aria-disabled="true"> | |
| <span class="pagination-ellipsis">…</span> | |
| {{--<span class="pagination-link">{{ $element }}</span>--}} | |
| </span> | |
| @endif | |
| {{-- Array Of Links --}} | |
| @if (is_array($element)) | |
| @foreach ($element as $page => $url) | |
| <li wire:key="paginator-page{{ $page }}"> | |
| <a wire:click="gotoPage({{ $page }})" class="pagination-link @if ($page == $paginator->currentPage()) is-current @endif" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> | |
| {{ $page }} | |
| </a> | |
| </li> | |
| @endforeach | |
| @endif | |
| @endforeach | |
| <li aria-label="{{ __('pagination.next') }}"> | |
| {{-- Next Page Link --}} | |
| <a wire:click="nextPage" class="pagination-link" aria-label="{{ __('pagination.next') }}" @if (!$paginator->hasMorePages()) disabled @endif> | |
| <span class="icon"> | |
| <i class="fas fa-chevron-right"></i> | |
| </span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <p class="label"> | |
| <span>{!! __('Showing') !!}</span> | |
| <span>{{ $paginator->firstItem() }}</span> | |
| <span>{!! __('to') !!}</span> | |
| <span>{{ $paginator->lastItem() }}</span> | |
| <span>{!! __('of') !!}</span> | |
| <span>{{ $paginator->total() }}</span> | |
| <span>{!! __('results') !!}</span> | |
| </p> | |
| @endif | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment