Pagination

View Original

Pagination components allow users to navigate between pages of content. Supports simple prev/next and ellipsis variants.

Goshtoso Component

Go + Templ

Simple Pagination (Prev/Next)

A minimal pagination with only previous and next buttons.

Simple Pagination (First Page)

Previous button is disabled on the first page.

Pagination with Ellipsis (Page 2 of 30)

Shows page numbers with ellipsis for large page ranges.

Pagination with Ellipsis (Page 15 of 30)

Current page in the middle shows ellipsis on both sides.

Pagination with Ellipsis (Page 29 of 30)

Near the end, ellipsis only appears before the range.

Small Page Count (No Ellipsis)

When total pages are 7 or fewer, all pages are shown.

Usage Example

// Simple pagination (prev/next only)
@pagination.Pagination(pagination.Config{
    Variant:     pagination.Simple,
    CurrentPage: 3,
    TotalPages:  10,
    BaseURL:     "/items",
})

// With ellipsis and page numbers
@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 2,
    TotalPages:  30,
    BaseURL:     "/items",
})

// With HTMX integration
@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 5,
    TotalPages:  30,
    BaseURL:     "/api/items",
    HTMXTarget:  "#items-tbody",
    HTMXSwap:    "innerHTML",
})

Key Value Select