ページネーション

paginate はページネーションコンポーネントを生成する関数です。クエリとオプションを引数として受け取ります。

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 />

上記のコードは次のようなHTMLを出力します:

<!-- 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>

以下のスタイルは、Bootstrap 5を使用した場合に適用されます。独自のCSSを追加することで、スタイルを上書きすることができます。

国際化

ページネーションの機能で出力される各テキストにも国際化(I18n)を適用することができます。

キー	デフォルト値	表示例
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

日本語での設定例:

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

ja:
  translation:
    views.pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "…"
    helpers.pageEntriesInfo:
      onePage:
        displayEntries_zero: "レコードが見つかりませんでした"
        displayEntries_other: "<b>全{{total}}</b>件表示中"
      morePages:
        displayEntries: "<b>{{first}}-{{last}}</b>件 / {{total}}件中"