fix pagination
This commit is contained in:
parent
2b9bbfa7b0
commit
6c4e46b542
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue