Pagination - JavaScript

Pagination

ReactVueJS + CSS

Struktur HTML

Copy

<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

Contoh 1 - Basic Pagination

Preview Code

Halaman 1 dari 10

Baris per halaman 10 20 50 100

Copy

<div style="padding: 20px">
  <div
    class="ina-pagination"
    id="pagination-variant-first"
    data-current="1"
    data-total="10"
    data-page-size="10"
  >
    <div class="ina-pagination__nav-container">
      <div class="ina-pagination__page-info" id="pagination-variant-first-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"
          data-action="first"
          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"
          data-action="prev"
          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>
        <!-- Page buttons will be inserted here by JavaScript -->
        <button
          type="button"
          class="ina-pagination__nav-button ina-pagination__nav-button--enabled"
          data-action="next"
        >
          <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"
          data-action="last"
        >
          <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" data-role="page-size">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initPagination === 'function') {
      window.InaUI.initPagination();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initPagination === 'function') {
      window.InaUI.initPagination();
    }
  });
</script>

Contoh 2 - Disabled State

Preview Code

Disable Pagination

Halaman 1 dari 10

Baris per halaman 10 20 50 100

Copy

<div style="padding: 20px">
  <div
    style="margin-bottom: 16px; border: 1px solid #e0e0e0; padding: 16px; width: fit-content; border-radius: 8px;"
  >
    <label for="pagination-variant-two-disable" class="ina-checkbox">
      <input type="checkbox" id="pagination-variant-two-disable" class="ina-checkbox__input" />
      <div class="ina-checkbox__box"></div>
      <div class="ina-checkbox__content">
        <span class="ina-checkbox__label">Disable Pagination</span>
      </div>
    </label>
  </div>
  <div
    class="ina-pagination"
    id="pagination-variant-two"
    data-total="10"
    data-current="1"
    data-page-size="10"
  >
    <div class="ina-pagination__nav-container">
      <div class="ina-pagination__page-info" id="pagination-variant-two-info">
        Halaman 1 dari 10
      </div>
      <div class="ina-pagination__nav-buttons">
        <button type="button" class="ina-pagination__nav-button" data-action="first">
          <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" data-action="prev">
          <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>
        <!-- Page buttons will be inserted here by JavaScript -->
        <button type="button" class="ina-pagination__nav-button" data-action="next">
          <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" data-action="last">
          <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"
        id="pagination-variant-two-page-size"
        data-role="page-size"
      >
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize components
    if (window.InaUI) {
      if (typeof window.InaUI.initPagination === 'function') {
        window.InaUI.initPagination();
      }
      if (typeof window.InaUI.initCheckbox === 'function') {
        window.InaUI.initCheckbox();
      }
    }

    // Handle disable toggle
    const container = document.getElementById('pagination-variant-two');
    const disableCheckbox = document.getElementById('pagination-variant-two-disable');

    if (container && disableCheckbox) {
      disableCheckbox.addEventListener('change', (e) => {
        const isDisabled = e.target.checked;
        if (isDisabled) {
          container.setAttribute('data-disabled', 'true');
        } else {
          container.setAttribute('data-disabled', 'false');
        }
      });
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI) {
      if (typeof window.InaUI.initPagination === 'function') {
        window.InaUI.initPagination();
      }
      if (typeof window.InaUI.initCheckbox === 'function') {
        window.InaUI.initCheckbox();
      }
    }
  });
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan