Pagination

Events

Subscribe to page changes from LiveView or the client.

On page change (Server)

Time	Source	Value
No event yet. Change page to log events.

    <.pagination class="pagination" count={95} page_size={10} on_page_change="pagination_page_changed">
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

    def handle_event("pagination_page_changed", %{"id" => id, "page" => page} = params, socket) do
  IO.inspect(params, label: "pagination_page_changed")
  {:noreply, socket}
end

On page change (Client)

    <.pagination
  id="pagination-events-client"
  class="pagination"
  count={95}
  page_size={10}
  on_page_change_client="pagination-page-changed"
>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

    document.getElementById("pagination-events-client")?.addEventListener("pagination-page-changed", (e) => {
  console.log(e.detail);
});

    type PageDetail = { id: string; page: number; page_size: number };

document.getElementById("pagination-events-client")?.addEventListener("pagination-page-changed", (e: CustomEvent<PageDetail>) => {
  console.log(e.detail);
});