Pagination

Voorbeeld HTML

<nav class="rvo-pagination">
  <div class="rvo-pagination__prev">
    <a
      class="rvo-link rvo-link--with-icon"
      aria-label="Delta naar links"
      href="#"
    >
      <span
        class="utrecht-icon rvo-icon rvo-icon-delta-naar-links rvo-icon--md rvo-icon--hemelblauw rvo-link__icon--before"
        role="img"
        aria-label="Delta naar links"
      ></span>
      Vorige
    </a>
  </div>
  <ul class="rvo-pagination__list">
    <li class="rvo-pagination__item">
      <a class="rvo-link" href="#">
        1
      </a>
    </li>
    <li class="rvo-pagination__item rvo-pagination__item--ellipses">...</li>
    <li class="rvo-pagination__item">
      <a class="rvo-link" href="#">
        9
      </a>
    </li>
    <li class="rvo-pagination__item rvo-pagination__item--active">
      <a class="rvo-link" aria-current="page" href="#">
        10
      </a>
    </li>
    <li class="rvo-pagination__item">
      <a class="rvo-link" href="#">
        11
      </a>
    </li>
    <li class="rvo-pagination__item rvo-pagination__item--ellipses">...</li>
    <li class="rvo-pagination__item">
      <a class="rvo-link" href="#">
        30
      </a>
    </li>
  </ul>
  <div class="rvo-pagination__next">
    <a
      class="rvo-link rvo-link--with-icon"
      aria-label="Delta naar rechts"
      href="#"
    >
      Volgende
      <span
        class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--md rvo-icon--hemelblauw  rvo-link__icon--after"
        role="img"
        aria-label="Delta naar rechts"
      ></span>
    </a>
  </div>
</nav>

Open in nieuwe tab

Gebruik ellipsen (…) om eventuele overgeslagen pagina's te vervangen. Bijvoorbeeld:

[1] 2 … 10

1 [2] 3 … 100

1 2 [3] 4 … 100

1 2 3 [4] 5 … 100

1 … 4 [5] 6 … 100

1 … 97 [98] 99 100

1 … 98 [99] 100

1 … 99 [100]

De functie voor deze logica kan als volgt worden geschreven:

const generatePageNumberMarkup = () => "";
const generateEllipsisMarkup = () => "";

const generatePageNumbers = (totalPages, activePage) => {
  const pages = [];

  // Always add the first page
  pages.push(generatePageNumberMarkup(1, activePage));

  // Add ellipses if the active page is more than 4
  if (activePage > 4) {
    pages.push(generateEllipsisMarkup());
  }
  if (activePage === 4) {
    pages.push(generatePageNumberMarkup(2, activePage));
  }

  // Add the page before the active page if it's more than 2
  if (activePage > 2) {
    pages.push(generatePageNumberMarkup(activePage - 1, activePage));
  }

  // Add the active page if it's not the first or last page
  if (activePage > 1 && activePage < totalPages) {
    pages.push(generatePageNumberMarkup(activePage, activePage));
  }

  // Add the page after the active page if it's less than total pages minus 1 and not the last page
  if (activePage < totalPages - 1 && activePage !== totalPages - 2) {
    pages.push(generatePageNumberMarkup(activePage + 1, activePage));
  }

  // Add ellipses if the active page is less than the total pages minus 3
  if (activePage < totalPages - 3) {
    pages.push(generateEllipsisMarkup());
  }

  // Add the second last page if the active page is less than the total pages minus 1 and greater than or equal to total pages minus 3
  if (activePage < totalPages - 1 && activePage >= totalPages - 3) {
    pages.push(generatePageNumberMarkup(totalPages - 1, activePage));
  }

  // Always add the last page
  if (totalPages !== 1) {
    pages.push(generatePageNumberMarkup(totalPages, activePage));
  }

  return pages;
};

generatePageNumbers(5, 30);