Flowbite::Pagination

Renders pagination controls for navigating between pages of results.

This component doesn’t know about pages, page numbers, or any pagination library. The caller decides which pages to show (including where to place gaps) using the +pages+ slot, and provides the URLs for the previous/next links directly.

Usage

<%= render(Flowbite::Pagination.new(
  previous_url: (posts_path(page: @pagy.page - 1) if @pagy.page > 1),
  next_url: (posts_path(page: @pagy.page + 1) if @pagy.page < @pagy.pages)
)) do |pagination| %>
  <% (1..@pagy.pages).each do |page| %>
    <% pagination.with_page do %>
      <%= render(Flowbite::Pagination::Link.new(
        page: page,
        url: posts_path(page: page),
        current: page == @pagy.page
      )) %>
    <% end %>
  <% end %>
<% end %>

Examples

Page Position

The caller decides which pages to show, including where to place gaps, and whether the previous/next links are enabled. These examples always show the first and last page, and a window of pages around the current page.

Custom Styling

Add custom classes to the pagination list.

API reference

Inherits from Flowbite

In namespace

Slots

`pages`	Flowbite::Pagination::Link, Flowbite::Pagination::Gap	The pages to show. Use {Flowbite::Pagination::Link} for page numbers, and {Flowbite::Pagination::Gap} where numbers are skipped.

Constructor

def initialize(next_url: nil, previous_url: nil, class: nil, **options)

Parameters

`class`	Array<String>	Additional CSS classes for the list element.
`next_url`	String	The URL for the next page. Omit to disable the next link, e.g. when already on the last page.
`options`	Hash	Additional HTML options for the nav element.
`previous_url`	String	The URL for the previous page. Omit to disable the previous link, e.g. when already on the first page.