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