Pagination · API
set_page via LiveView JS or server push. Page numbers are 1-based.
LiveView binding
<div class="layout__row">
<.action phx-click={Corex.Pagination.set_page("pagination-api-bind", 1)} class="button button--sm">1</.action>
<.action phx-click={Corex.Pagination.set_page("pagination-api-bind", 5)} class="button button--sm">5</.action>
<.action phx-click={Corex.Pagination.set_page("pagination-api-bind", 9)} class="button button--sm">9</.action>
</div>
<.pagination id="pagination-api-bind" class="pagination" count={95} page={5} page_size={10}>
<:prev><.heroicon name="hero-chevron-left" /></:prev>
<:next><.heroicon name="hero-chevron-right" /></:next>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
Server push
<.action phx-click="pagination_api_page_3" class="button button--sm">Page 3</.action>
<.pagination id="pagination-api-srv" class="pagination" count={95} page={@page} page_size={10} controlled on_page_change="pagination_api_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_api_page_3", _, socket) do
{:noreply, Corex.Pagination.set_page(socket, "pagination-api-srv", 3)}
end
def handle_event("pagination_api_page_changed", %{"page" => page}, socket) do
{:noreply, assign(socket, :page, page)}
end