---
title: "Pagination"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS pagination. Numbered pages, prev/next arrows, page jump select — no JavaScript. WCAG accessible, works with Django, HTMX, Laravel, React."
url: https://frutjam.com/vi/components/pagination
---

# Pagination

Các thành phần phân trang cho phép người dùng điều hướng giữa các trang nội dung - kết quả tìm kiếm, bảng dữ liệu, kho lưu trữ bài viết và danh sách sản phẩm. Được xây dựng bằng cách kết hợp các thành phần [Tham gia](/comComponents/join) và [Nút](/comComponents/button), phân trang Frutjam không yêu cầu JavaScript và không cần CSS bổ sung. Hỗ trợ các trang được đánh số, mũi tên trước/tiếp theo, khoảng trống dấu ba chấm, đầu vào radio có thể truy cập và chọn nhảy trang.

Chỉ CSS, không cần JavaScript — xây dựng khả năng phân trang có thể truy cập bằng HTML thuần túy và CSS Tailwind. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React, Next.js và bất kỳ ngăn xếp nào.

| Lớp học      | Kiểu            | Sự miêu tả                                            |
| ------------ | --------------- | ----------------------------------------------------- |
| join         | Căn cứ          | Nhóm các nút vào một dải phân trang được kết nối      |
| join-item    | Công cụ sửa đổi | Mỗi nút trang hoặc đầu vào bên trong liên kết         |
| btn-active   | State           | Làm nổi bật trang hiện tại                            |
| btn-disabled | State           | Dấu chấm lửng không tương tác hoặc trang không có sẵn |

## Phân trang cơ bản

Một dải trang được đánh số với một trang đang hoạt động. Áp dụng **btn-active** để đánh dấu trang hiện tại. Sử dụng thẻ neo thay vì nút cho các liên kết trang do máy chủ hiển thị.

### Sizes

Phân trang kế thừa tất cả các kích thước nút. Sử dụng **btn-xs** hoặc **btn-sm** cho các bảng nhỏ gọn và **btn-lg** cho giao diện cảm ứng đầu tiên.

### Với dấu ba chấm

Sử dụng **btn-disabled** để tạo khoảng cách dấu chấm lửng giữa nhiều trang. Trình đọc màn hình bỏ qua các nút bị tắt để ghép nối với `aria-hidden="true"` trên dấu chấm lửng.

## Điều hướng Trước/Tiếp theo

Phân trang dựa trên mũi tên là mẫu phổ biến nhất cho blog, danh sách sản phẩm và bất kỳ nguồn cấp dữ liệu được phân trang nào mà việc hiển thị số trang chính xác là không thực tế.

### Với các biểu tượng mũi tên

### Chiều rộng bằng nhau Trước / Tiếp theo

Sử dụng trình bao bọc **grid Grid-cols-2** trên vùng chứa liên kết để cung cấp cho cả hai nút chiều rộng bằng nhau — lý tưởng cho bố cục ưu tiên thiết bị di động và thanh phân trang có chiều rộng đầy đủ.

### Với Đầu tiên / Cuối cùng

Thêm các nút mũi tên kép để cho phép người dùng chuyển trực tiếp đến trang đầu tiên hoặc trang cuối cùng. Hữu ích cho các bảng dữ liệu có hàng trăm trang.

## Phân trang vô tuyến có thể truy cập

Sử dụng đầu vào `type="radio"` làm mục kết hợp để chọn trang chỉ có CSS, có thể điều hướng hoàn toàn bằng bàn phím mà không có JavaScript. Mỗi đầu vào hoạt động như một nút có thể nhấn trong khi vẫn giữ trạng thái đã chọn ở trạng thái dạng gốc.

## Phân trang bằng cách nhảy trang

Kết hợp các nút nối, nút và lựa chọn cho thanh phân trang nhỏ gọn cho phép người dùng chuyển trực tiếp đến bất kỳ trang nào — phổ biến trong bảng thông tin quản trị viên, giao diện CMS và ứng dụng nặng dữ liệu. Không cần JavaScript cho chính lựa chọn đó; ghép nối với HTMLX hoặc gửi biểu mẫu để điều hướng phía máy chủ.

## Phong cách phác thảo

Sử dụng **btn-outline** trên tất cả các nút để có hình ảnh nhẹ nhàng hơn, phù hợp với các phần nội dung phụ và thanh bên.