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><.heroicon name="hero-chevron-left" /></:prev>
<:next><.heroicon name="hero-chevron-right" /></:next>
<: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><.heroicon name="hero-chevron-left" /></:prev>
<:next><.heroicon name="hero-chevron-right" /></:next>
<: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);
});