Corepanel – Pagination

Basic

Basic usage of Pagination.

<nav data-pg aria-label="Basic pagination">
  <ul class="flex flex-wrap items-center gap-1">
    <li><button data-pg-prev aria-label="Previous page" disabled>‹</button></li>
    <li><button data-pg-page="1" aria-current="page">1</button></li>
    <li><button data-pg-page="2">2</button></li>
    <li><button data-pg-page="3">3</button></li>
    <li><button data-pg-page="4">4</button></li>
    <li><button data-pg-page="5">5</button></li>
    <li><button data-pg-next aria-label="Next page">›</button></li>
  </ul>
</nav>

More

Pagination shows an ellipsis to stand in for the pages it has skipped, so a long run never prints every number.

<!-- pagination.js fills [data-pg-list] from data-pg-total -->
<nav data-pg data-pg-total="50" aria-label="50 pages">
  <ul class="flex flex-wrap items-center gap-1" data-pg-list></ul>
</nav>

<nav data-pg data-pg-total="100" aria-label="100 pages">
  <ul class="flex flex-wrap items-center gap-1" data-pg-list></ul>
</nav>

Total

Show the number of records alongside the pages by setting data-pg-items.

<nav data-pg data-pg-total="50" data-pg-items="50"
     aria-label="Pagination with total"
     class="flex flex-wrap items-center gap-x-4 gap-y-2">
  <p data-pg-summary class="num-display text-sm text-muted"></p>
  <ul class="flex flex-wrap items-center gap-1" data-pg-list></ul>
</nav>

Page sizes

The page count is derived from items divided by the chosen page size, so changing the size re-counts the pages rather than leaving a stale run of buttons.

<nav data-pg data-pg-items="100" data-pg-size="5"
     aria-label="Pagination with page size"
     class="flex flex-wrap items-center gap-x-4 gap-y-2">
  <p data-pg-summary class="num-display text-sm text-muted"></p>
  <ul class="flex flex-wrap items-center gap-1" data-pg-list></ul>
  <select data-pg-select>
    <option value="5">5 / page</option>
    <option value="10">10 / page</option>
    <option value="20">20 / page</option>
  </select>
</nav>

Controlled

Start on a given page with data-pg-current. Deep in a long run the component shows an ellipsis on both sides of the window.

<nav data-pg data-pg-total="100" data-pg-current="60"
     aria-label="Controlled pagination">
  <ul class="flex flex-wrap items-center gap-1" data-pg-list></ul>
</nav>