Pagination - JavaScript
Pagination
Struktur HTML
Section titled “Struktur HTML”
<div class="ina-pagination">
<div class="ina-pagination__nav-container">
<div class="ina-pagination__page-info">Halaman 1 dari 10</div>
<div class="ina-pagination__nav-buttons">
<button
type="button"
class="ina-pagination__nav-button ina-pagination__nav-button--disabled"
disabled
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-pagination__nav-icon"
>
<path d="M11 7l-5 5l5 5"></path>
<path d="M17 7l-5 5l5 5"></path>
</svg>
</button>
<button
type="button"
class="ina-pagination__nav-button ina-pagination__nav-button--disabled"
disabled
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-pagination__nav-icon"
>
<path d="M15 6l-6 6l6 6"></path>
</svg>
</button>
<button
type="button"
class="ina-pagination__page-button ina-pagination__page-button--active"
>
1
</button>
<button
type="button"
class="ina-pagination__page-button ina-pagination__page-button--enabled"
>
2
</button>
<button
type="button"
class="ina-pagination__page-button ina-pagination__page-button--enabled"
>
3
</button>
<button
type="button"
class="ina-pagination__nav-button ina-pagination__nav-button--enabled"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-pagination__nav-icon"
>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</button>
<button
type="button"
class="ina-pagination__nav-button ina-pagination__nav-button--enabled"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ina-pagination__nav-icon"
>
<path d="M7 7l5 5l-5 5"></path>
<path d="M13 7l5 5l-5 5"></path>
</svg>
</button>
</div>
</div>
<div class="ina-pagination__page-size-container">
<span class="ina-pagination__page-size-label">Baris per halaman</span>
<select class="ina-pagination__page-size-select">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1 - Basic Pagination
Section titled “Contoh 1 - Basic Pagination”
Halaman 1 dari 10
Baris per halaman
Contoh 2 - Disabled State
Section titled “Contoh 2 - Disabled State”
Halaman 1 dari 10
Baris per halaman