Navigasi & Struktur
Pagination (Paginasi Halaman Data)
Kontrol navigasi untuk berpindah antar halaman pada tabel perizinan, daftar berita, atau arsip publik.
Pagination (.mjl-pagination) membagi daftar rekaman data yang panjang menjadi beberapa halaman terpisah sehingga meringankan waktu muat (load time) pada koneksi internet lambat di pelosok.
1. Pratinjau Pagination
Pratinjau Paginasi Tabel
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<nav aria-label="Navigasi halaman data">
<ul class="mjl-pagination">
<li class="mjl-pagination__item"><a class="mjl-pagination__link" href="?hal=1" aria-label="Halaman sebelumnya">←</a></li>
<li class="mjl-pagination__item"><a class="mjl-pagination__link" href="?hal=1">1</a></li>
<li class="mjl-pagination__item"><a class="mjl-pagination__link mjl-pagination__link--active" href="?hal=2" aria-current="page">2</a></li>
<li class="mjl-pagination__item"><a class="mjl-pagination__link" href="?hal=3">3</a></li>
<li class="mjl-pagination__item"><a class="mjl-pagination__link" href="?hal=3" aria-label="Halaman berikutnya">→</a></li>
</ul>
</nav>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlPagination } from '@majalengka/vue';
const halaman = ref(1);
</script>
<template>
<MjlPagination v-model="halaman" :page-count="12" />
</template>
export function MjlPagination({ page, pageCount, onChange }: { page: number; pageCount: number; onChange: (p: number) => void }) {
const pages = Array.from({ length: pageCount }, (_, i) => i + 1);
return (
<nav aria-label="Navigasi halaman data">
<ul className="mjl-pagination">
<li className="mjl-pagination__item">
<button type="button" className="mjl-pagination__link" aria-label="Halaman sebelumnya" disabled={page === 1} onClick={() => onChange(page - 1)}>←</button>
</li>
{pages.map((p) => (
<li key={p} className="mjl-pagination__item">
<button type="button" className={`mjl-pagination__link ${p === page ? 'mjl-pagination__link--active' : ''}`}
aria-current={p === page ? 'page' : undefined} onClick={() => onChange(p)}>{p}</button>
</li>
))}
<li className="mjl-pagination__item">
<button type="button" className="mjl-pagination__link" aria-label="Halaman berikutnya" disabled={page === pageCount} onClick={() => onChange(page + 1)}>→</button>
</li>
</ul>
</nav>
);
}
import { Component, computed, input, model } from '@angular/core';
@Component({
selector: 'mjl-pagination',
standalone: true,
template: `
<nav aria-label="Navigasi halaman data">
<ul class="mjl-pagination">
<li class="mjl-pagination__item">
<button type="button" class="mjl-pagination__link" aria-label="Halaman sebelumnya" [disabled]="page() === 1" (click)="page.set(page() - 1)">←</button>
</li>
@for (p of pages(); track p) {
<li class="mjl-pagination__item">
<button type="button" class="mjl-pagination__link" [class.mjl-pagination__link--active]="p === page()"
[attr.aria-current]="p === page() ? 'page' : null" (click)="page.set(p)">{{ p }}</button>
</li>
}
<li class="mjl-pagination__item">
<button type="button" class="mjl-pagination__link" aria-label="Halaman berikutnya" [disabled]="page() === pageCount()" (click)="page.set(page() + 1)">→</button>
</li>
</ul>
</nav>
`,
})
export class MjlPagination {
page = model(1);
pageCount = input.required<number>();
pages = computed(() => Array.from({ length: this.pageCount() }, (_, i) => i + 1));
}
{{-- resources/views/vendor/pagination/mjl.blade.php — pakai: $warga->links('vendor.pagination.mjl') --}}
@if ($paginator->hasPages())
<nav aria-label="Navigasi halaman data">
<ul class="mjl-pagination">
<li class="mjl-pagination__item">
<a class="mjl-pagination__link" href="{{ $paginator->previousPageUrl() }}" aria-label="Halaman sebelumnya" @if ($paginator->onFirstPage()) aria-disabled="true" @endif>←</a>
</li>
@foreach ($elements as $element)
@if (is_array($element))
@foreach ($element as $page => $url)
<li class="mjl-pagination__item">
<a href="{{ $url }}" @class(['mjl-pagination__link', 'mjl-pagination__link--active' => $page == $paginator->currentPage()])
@if ($page == $paginator->currentPage()) aria-current="page" @endif>{{ $page }}</a>
</li>
@endforeach
@endif
@endforeach
<li class="mjl-pagination__item">
<a class="mjl-pagination__link" href="{{ $paginator->nextPageUrl() }}" aria-label="Halaman berikutnya" @unless ($paginator->hasMorePages()) aria-disabled="true" @endunless>→</a>
</li>
</ul>
</nav>
@endif
<?php $hal = max(1, (int) ($_GET['hal'] ?? 1)); $total = 12; ?>
<nav aria-label="Navigasi halaman data">
<ul class="mjl-pagination">
<?php for ($p = 1; $p <= $total; $p++): ?>
<li class="mjl-pagination__item">
<a href="?hal=<?= $p ?>" class="mjl-pagination__link<?= $p === $hal ? ' mjl-pagination__link--active' : '' ?>"
<?= $p === $hal ? 'aria-current="page"' : '' ?>><?= $p ?></a>
</li>
<?php endfor; ?>
</ul>
</nav>