Pagination

Default Pagination

• Zurück
• 1
• 2
• 3
• Nächste Seite

Show Code

<nav aria-label="Seitennavigation">
  <ul class="c-pagination">
    <li class="c-pagination__item -is-arrow -is-disabled">
      <a class="c-pagination__item__link" href="#" aria-label="Zurück">
        <span aria-hidden="true" class="fa fa-chevron-left"></span>
        <span class="sr-only">Zurück</span>
      </a>
    </li>
    <li class="c-pagination__item -is-active">
        <a class="c-pagination__item__link" href="#">1</a>
    </li>
    <li class="c-pagination__item">
        <a class="c-pagination__item__link" href="#">2</a>
    </li>
    <li class="c-pagination__item">
        <a class="c-pagination__item__link" href="#">3</a>
    </li>
    <li class="c-pagination__item -is-arrow">
      <a class="c-pagination__item__link" href="#" aria-label="Nächste Seite">
        <span aria-hidden="true" class="fa fa-chevron-right"></span>
        <span class="sr-only">Nächste Seite</span>
      </a>
    </li>
  </ul>
</nav>

DataTable Pagination

TIP

See DataTable.

12345…8

Show Code

<div class="dataTables_paginate paging_simple_numbers">
  <a class="paginate_button previous disabled" aria-controls="ausgangsstoffliste-table" data-dt-idx="0" tabindex="-1" id="ausgangsstoffliste-table_previous"><i class="fa fa-chevron-left"></i></a>
  <span>
    <a class="paginate_button current" aria-controls="ausgangsstoffliste-table" data-dt-idx="1" tabindex="0">1</a>
    <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="2" tabindex="0">2</a>
    <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="3" tabindex="0">3</a>
    <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="4" tabindex="0">4</a>
    <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="5" tabindex="0">5</a>
    <span class="ellipsis">…</span>
    <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="6" tabindex="0">8</a>
  </span>
  <a class="paginate_button next" aria-controls="ausgangsstoffliste-table" data-dt-idx="7" tabindex="0" id="ausgangsstoffliste-table_next"><i class="fa fa-chevron-right"></i></a>
</div>

Pagination Arrows Per Class

.c-pagination__item.-is-arrow.-show-arrow[.-prev/.-next]

Show Code

<ul class="c-pagination">
  <li class="c-pagination__item -is-arrow -show-arrow -prev">
    <a class="c-pagination__item__link" href="#" aria-label="Vorherige Seite"></a>
  </li>
  <li class="c-pagination__item -is-arrow -show-arrow -next">
    <a class="c-pagination__item__link" href="#" aria-label="Nächste Seite"></a>
  </li>
</ul>