Files
think-greaterchiangmai/think.greaterchiangmai.com/resources/views/uc/pagination.blade.php
2025-11-11 14:55:29 +07:00

100 lines
2.8 KiB
PHP

<style>
.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination {
display: flex;
list-style: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination .page-link {
color: #E23134;
background-color: white;
border: 1px solid #dee2e6;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.pagination .page-link:hover {
background-color: #E23134;
color: #fff !important;
}
.pagination .active .page-link {
background-color: #E23134;
color: #fff;
border-color: #E23134;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
border: 1px solid #dee2e6;
border-radius: 50% !important;
}
</style>
@if (is_object($data) && $data->hasPages())
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($data->onFirstPage())
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">&laquo;</span>
</li>
@else
<li class="page-item">
<a class="page-link" href="{{ $data->previousPageUrl() }}" rel="prev">&laquo;</a>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($data->links()->elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">{{ $element }}</span>
</li>
@endif
{{-- Array of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $data->currentPage())
<li class="page-item active" aria-current="page">
<span class="page-link">{{ $page }}</span>
</li>
@else
<li class="page-item">
<a class="page-link" href="{{ $url }}">{{ $page }}</a>
</li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($data->hasMorePages())
<li class="page-item">
<a class="page-link" href="{{ $data->nextPageUrl() }}" rel="next">&raquo;</a>
</li>
@else
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">&raquo;</span>
</li>
@endif
</ul>
@endif