Pagination

paginate is a function that generates pagination components. It takes a query and options as arguments.

src/pages/accounts/index.astro

---
import { paginate } from "accel-web";
import { Account } from "src/models";

const url = new URL(Astro.request.url);
const page = Number(url.searchParams.get("p")) || 1;

const { Nav, PageEntriesInfo } = paginate(Account.order("id", "desc"), { page, per: 10, window: 1 });
---

<!-- nav -->
<Nav />

<!-- info -->
<PageEntriesInfo />

The above code will render a result like:

<!-- nav -->
<nav>
  <ul class="pagination">
    <li class="page-item first">
      <a href="/?p=1" class="page-link">« First</a>
    </li>
    <li class="page-item prev">
      <a rel="prev" href="/?p=2" class="page-link">‹ Prev</a>
    </li>
    <li class="page-item disabled gap">
      <span class="page-link">…</span>
    </li>
    <li class="page-item page">
      <a href="/?p=2" class="page-link"> 2 </a>
    </li>
    <li class="page-item page active">
      <span class="page-link">3</span>
    </li>
    <li class="page-item page">
      <a href="/?p=4" class="page-link"> 4 </a>
    </li>
    <li class="page-item disabled gap">
      <span class="page-link">…</span>
    </li>
    <li class="page-item next">
      <a rel="next" href="/?p=4" class="page-link">Next ›</a>
    </li>
    <li class="page-item last">
      <a href="/?p=6" class="page-link">Last »</a>
    </li>
  </ul>
</nav>

<!-- info -->
<div class="page-entries-info">Displaying <b>21 - 30</b> of <b>55</b> in total</div>

The following styles will be applied when Bootstrap 5 is used. You can override the styles by adding your own CSS.

Internationalization

You can apply internationalization (I18n) to the text output by the pagination feature.

Key	Default Value	Example
views.pagination.first	« First	« First
views.pagination.last	Last »	Last »
views.pagination.previous	‹ Prev	‹ Prev
views.pagination.next	Next ›	Next ›
views.pagination.truncate	…	…
helpers.pageEntriesInfo.onePage.displayEntries_zero	No entries found	No entries found
helpers.pageEntriesInfo.onePage.displayEntries_other	Displaying all {total} entries	Displaying all 5 entries
helpers.pageEntriesInfo.morePages.displayEntries	Displaying {first} - {last} of {total} in total	Displaying 1-10 of 55 in total

Example settings:

src/config/locales/views/pagination/en.yml

en:
  translation:
    views.pagination:
      first: "« First"
      last: "Last »"
      previous: "‹ Previous"
      next: "Next ›"
      truncate: "…"
    helpers.pageEntriesInfo:
      onePage:
        displayEntries_zero: "No entries found"
        displayEntries_other: "Displaying <b>all {{total}}</b> entries"
      morePages:
        displayEntries: "Displaying <b>{{first}}-{{last}}</b> of <b>{{total}}</b> entries"