Pagination

Default Pagination

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

DataTable Pagination

See DataTable.

12345…8

Vue Pagination

1 bis 10 von 34 Einträgen

Show Code

<div class="VuePagination">
  <nav class="c-pagination-nav">
    <ul class="VuePagination__pagination c-pagination VuePagination__pagination">
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item VuePagination__pagination-item VuePagination__pagination-item-prev-page c-pagination__item -is-arrow -show-arrow -prev -is-disabled VuePagination__pagination-item-prev-chunk -is-disabled">
        <button type="button" class="c-pagination__item__link" disabled="">&lt;&lt;</button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item VuePagination__pagination-item VuePagination__pagination-item-prev-page c-pagination__item -is-arrow -show-arrow -prev -is-disabled VuePagination__pagination-item-prev-page -is-disabled">
        <button type="button" class="c-pagination__item__link" disabled="">&lt;</button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item -is-active">
        <button class="c-pagination__item__link -is-active">1</button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item ">
        <button class="c-pagination__item__link ">2</button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item ">
        <button class="c-pagination__item__link ">3</button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item VuePagination__pagination-item  VuePagination__pagination-item-next-page c-pagination__item -is-arrow -show-arrow -next  VuePagination__pagination-item-next-page ">
        <button type="button" class="c-pagination__item__link">
          &gt;
        </button>
      </li>
      <li class="VuePagination__pagination-item VuePagination__pagination-item c-pagination__item VuePagination__pagination-item  VuePagination__pagination-item-next-page c-pagination__item -is-arrow -show-arrow -next  VuePagination__pagination-item-next-chunk -is-disabled">
        <button type="button" class="c-pagination__item__link" disabled="">
          &gt;&gt;
        </button>
      </li>
    </ul>
    <p class="VuePagination__count VuePagination__count ">1 bis 10 von 34 Einträgen</p>
  </nav>
</div>

Pagination Arrows Per Class

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