CasperSecurity
<div>
@if ($paginator->hasPages())
<nav class="justify-content-between">
<div class="row flex justify-between">
<div class="w-1/3 justify-content-start" style="padding-top: 20px;">
<span class=" text-grey-600 " style="font-size: 12px; " aria-hidden="true"> Results : {{$paginator->currentPage()}} - {{$paginator->count()}} of {{$paginator->total()}}</span>
</div>
<div class="w-2/3 justify-content-end py-4">
<ul class="pagination justify-content-end flex" style="float: right;">
{{--Previous Page Link--}}
@if ($paginator->onFirstPage())
<li class="page-item px-2 disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<span class="page-link " style="font-size: 12px;" aria-hidden="true">‹ Previous</span>
</li>
@else
<li class="page-item px-2">
<button type="button" style="font-size: 12px;" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">‹ Previous</button>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item px-2 disabled" aria-disabled="true"><span class="page-link" style="font-size: 12px;">{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="page-item px-2 active " wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link text-dark font-bold" style="font-size: 14px;">{{ $page }}</span></li>
@else
<li class="page-item px-2" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}) " style="font-size: 12px;">{{ $page }}</button></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item px-2">
<button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')" style="font-size: 12px;">Next ›</button>
</li>
@else
<li class="page-item px-2 disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span class="page-link" aria-hidden="true" style="font-size: 12px;">Next ›</span>
</li>
@endif
</ul>
</div>
</div>
</nav>
@endif
</div>