Register

Pagination

Pages of a long list

Pagination

The current page is marked; previous and next say when they cannot go on.

Show the code
<nav aria-label="Orders pages" data-pager-demo>
<ul class="pager">
<li>
<button type="button" data-page-prev aria-label="Previous page" aria-disabled="true">
<i class="ti ti-chevron-left">
</i>
</button>
</li>
<li>
<button type="button" data-page aria-current="page" aria-label="Page 1">1</button>
</li>
<li>
<button type="button" data-page aria-label="Page 2">2</button>
</li>
<li>
<button type="button" data-page aria-label="Page 3">3</button>
</li>
<li>
<button type="button" data-page aria-label="Page 4">4</button>
</li>
<li>
<button type="button" data-page aria-label="Page 5">5</button>
</li>
<li>
<button type="button" data-page-next aria-label="Next page">
<i class="ti ti-chevron-right">
</i>
</button>
</li>
</ul>
<span class="sr-only" role="status" data-page-status>
</span>
</nav>

With the count

As the tables show it.

Show the code
<div class="pagination w-100">
<span>Showing 1–10 of 240</span>
<nav aria-label="Sales pages" data-pager-demo>
<ul class="pager">
<li>
<button type="button" data-page-prev aria-label="Previous page" aria-disabled="true">
<i class="ti ti-chevron-left">
</i>
</button>
</li>
<li>
<button type="button" data-page aria-current="page" aria-label="Page 1">1</button>
</li>
<li>
<button type="button" data-page aria-label="Page 2">2</button>
</li>
<li>
<button type="button" data-page aria-label="Page 3">3</button>
</li>
<li>
<span aria-hidden="true">…</span>
</li>
<li>
<button type="button" data-page aria-label="Page 24">24</button>
</li>
<li>
<button type="button" data-page-next aria-label="Next page">
<i class="ti ti-chevron-right">
</i>
</button>
</li>
</ul>
<span class="sr-only" role="status" data-page-status>
</span>
</nav>
</div>