fix pagination

This commit is contained in:
Sveemaaa 2026-05-07 20:29:06 +07:00
parent 2b9bbfa7b0
commit 6c4e46b542
7 changed files with 224 additions and 45 deletions

View File

@ -1,6 +1,7 @@
<?php
namespace App\Providers;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;
@ -19,6 +20,6 @@ public function register(): void
*/
public function boot(): void
{
//
Paginator::useBootstrapFive();
}
}

View File

@ -107,10 +107,16 @@ class="btn btn-sm btn-edit-custom" title="Edit">
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<small class="text-muted">Menampilkan {{ $balita->firstItem() ?? 0 }} sampai {{ $balita->lastItem() ?? 0 }} dari {{ $balita->total() }} data</small>
<div>
{{ $balita->withQueryString()->links() }}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $balita->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $balita->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $balita->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $balita->links() }}
</div>
</div>
@ -198,6 +204,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
opacity: 0.8;
cursor: default;
}
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>

View File

@ -88,13 +88,18 @@ class="btn btn-sm btn-edit-custom" title="Edit">
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<small class="text-muted">Menampilkan {{ $t_edukasi->firstItem() ?? 0 }} sampai {{ $t_edukasi->lastItem() ?? 0 }} dari {{ $t_edukasi->total() }} data</small>
<div>
{{ $t_edukasi->withQueryString()->links() }}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $t_edukasi->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $t_edukasi->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $t_edukasi->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $t_edukasi->links() }}
</div>
</div>
</div>
</div>
@ -112,48 +117,55 @@ class="btn btn-sm btn-edit-custom" title="Edit">
.btn-edit-custom:hover { background-color: #f59f00; color: white; }
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>
<script>
let delayTimer;
document.getElementById('search').addEventListener('keyup', function () {
clearTimeout(delayTimer);
let query = this.value;
delayTimer = setTimeout(() => {
fetch(`{{ route('edukasi.index') }}?search=` + query)
.then(response => response.text())
.then(html => {
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let newTable = doc.querySelector('#edukasi-table').innerHTML;
document.getElementById('edukasi-table').innerHTML = newTable;
});
}, 300);
});
</script>
@endsection

View File

@ -40,6 +40,7 @@
<thead>
<tr>
<th style="width: 5%">No</th>
<th>NIK</th>
<th>Nama</th>
<th>Tanggal Lahir</th>
<th>Alamat</th>
@ -94,10 +95,16 @@ class="btn btn-sm btn-edit-custom" title="Edit">
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<small class="text-muted">Menampilkan {{ $ibu_hamil->firstItem() ?? 0 }} sampai {{ $ibu_hamil->lastItem() ?? 0 }} dari {{ $ibu_hamil->total() }} data</small>
<div>
{{ $ibu_hamil->withQueryString()->links() }}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $ibu_hamil->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $ibu_hamil->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $ibu_hamil->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $ibu_hamil->links() }}
</div>
</div>
@ -185,6 +192,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
opacity: 0.8;
cursor: default;
}
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>

View File

@ -108,10 +108,16 @@
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<small class="text-muted">Menampilkan {{ $p_balita->firstItem() ?? 0 }} sampai {{ $p_balita->lastItem() ?? 0 }} dari {{ $p_balita->total() }} data</small>
<div>
{{ $p_balita->withQueryString()->links() }}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $p_balita->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $p_balita->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $p_balita->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $p_balita->links() }}
</div>
</div>
@ -133,6 +139,32 @@
.btn-detail-custom:hover { background-color: #007bff; color: white; }
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>

View File

@ -111,8 +111,21 @@
</table>
</div>
<div class="d-flex justify-content-center mt-4">
{{-- <div class="d-flex justify-content-center mt-4">
{{ $p_ibuhamil->withQueryString()->links() }}
</div> --}}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $p_ibuhamil->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $p_ibuhamil->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $p_ibuhamil->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $p_ibuhamil->links() }}
</div>
</div>
</div>
</div>
@ -132,6 +145,32 @@
.btn-detail-custom:hover { background-color: #007bff; color: white; }
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>

View File

@ -96,14 +96,18 @@ class="btn btn-sm btn-edit-custom" title="Edit">
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<small class="text-muted">Menampilkan {{ $user->firstItem() ?? 0 }} sampai {{ $user->lastItem() ?? 0 }} dari {{ $user->total() }} data</small>
<div>
{{ $user->withQueryString()->links() }}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 px-2">
<div class="mb-3 mb-md-0">
<p class="text-muted small mb-0">
Menampilkan <span class="fw-bold text-dark">{{ $user->firstItem() ?? 0 }}</span>
sampai <span class="fw-bold text-dark">{{ $user->lastItem() ?? 0 }}</span>
dari <span class="fw-bold text-dark">{{ $user->total() }}</span> data
</p>
</div>
<div class="pagination-orange">
{{ $user->links() }}
</div>
</div>
</div>
</div>
@ -163,6 +167,32 @@ class="btn btn-sm btn-edit-custom" title="Edit">
border-color: #FF782D;
box-shadow: 0 0 0 0.2rem rgba(255, 120, 45, 0.25);
}
.pagination-orange .pagination {
gap: 5px;
}
.pagination-orange .page-link {
border-radius: 8px !important;
color: #FF782D !important;
border: 1px solid #eee !important;
}
.pagination-orange .page-item.active .page-link {
background-color: #FF782D !important;
border-color: #FF782D !important;
color: white !important;
}
.pagination-orange nav .flex.items-center.justify-between .hidden.sm-flex-1 {
display: none !important;
}
/* Jika masih ada teks 'Showing' di versi mobile */
.pagination-orange nav div:first-child p {
display: none !important;
}
/* Memastikan tombol angka tetap rapi */
.pagination-orange .pagination {
margin-bottom: 0;
}
</style>
<script>