Live examples and demonstrations
Navigate through multi-page content with numbered pages and directional controls
Get up and running in 2 minutes with our Quick Start Guide!
View Quick Start Guide.rsl-pagination — Main container (ul element).active — Current page indicator (on li element).disabled — Disabled prev/next buttons (on li element).compact — Smaller size variant (on ul element)
aria-label — Descriptive labels for prev/next/first/lastaria-current="page" — Indicates current pagearia-disabled="true" — Indicates disabled state
styles/pagination.css - Pagination stylingjavascript/pagination.js - Optional table pagination behavior
Typical search results layout with pagination at bottom.
Learn how to create fluid, mobile-friendly layouts that adapt to any screen size...
A comprehensive guide to choosing the right layout system for your project...
Essential tips for creating inclusive web experiences for all users...
Speed up your website with these proven optimization strategies...
Explore the pros and cons of React, Vue, and Angular...
Product or content cards with pagination controls.
Description of product with key features and benefits.
$29.99
Description of product with key features and benefits.
$39.99
Description of product with key features and benefits.
$49.99
Description of product with key features and benefits.
$59.99
Description of product with key features and benefits.
$69.99
Description of product with key features and benefits.
$79.99
Large datasets with pagination for manageable viewing.
| ID | Name | Status | Date | |
|---|---|---|---|---|
| 101 | John Doe | john@example.com | Active | 2024-01-15 |
| 102 | Jane Smith | jane@example.com | Active | 2024-01-16 |
| 103 | Bob Johnson | bob@example.com | Pending | 2024-01-17 |
| 104 | Alice Williams | alice@example.com | Active | 2024-01-18 |
| 105 | Charlie Brown | charlie@example.com | Inactive | 2024-01-19 |
Click the pagination controls below to see the table rows change. This example uses pagination.js to automatically paginate any table with the .rsl-table class.
| ID | Name | Department | |
|---|---|---|---|
| 001 | John Doe | john1@example.com | Engineering |
| 002 | Jane Smith | jane2@example.com | Marketing |
| 003 | Bob Johnson | bob3@example.com | Sales |
| 004 | Alice Williams | alice4@example.com | HR |
| 005 | Charlie Brown | charlie5@example.com | Engineering |
| 006 | Diana Prince | diana6@example.com | Marketing |
| 007 | Eve Davis | eve7@example.com | Sales |
| 008 | Frank Miller | frank8@example.com | HR |
| 009 | Grace Lee | grace9@example.com | Engineering |
| 010 | Henry Wilson | henry10@example.com | Marketing |
| 011 | Iris Chen | iris11@example.com | Sales |
| 012 | Jack Taylor | jack12@example.com | HR |
| 013 | Kate Anderson | kate13@example.com | Engineering |
| 014 | Liam Thomas | liam14@example.com | Marketing |
| 015 | Mary Moore | mary15@example.com | Sales |
| 016 | Nick Jackson | nick16@example.com | HR |
| 017 | Olivia White | olivia17@example.com | Engineering |
| 018 | Paul Harris | paul18@example.com | Marketing |
| 019 | Quinn Martin | quinn19@example.com | Sales |
| 020 | Rachel Garcia | rachel20@example.com | HR |
| 021 | Sam Robinson | sam21@example.com | Engineering |
| 022 | Tina Clark | tina22@example.com | Marketing |
| 023 | Uma Rodriguez | uma23@example.com | Sales |
| 024 | Victor Lewis | victor24@example.com | HR |
| 025 | Wendy Walker | wendy25@example.com | Engineering |
pagination.js in your page.rsl-table class to your table.rsl-pagination pagination controls nearbySmaller pagination for sidebars or mobile views.
Show limited page numbers with ellipsis for long page ranges.
aria-label - Descriptive labels for prev/next/first/last linksaria-current="page" - Indicates current page to screen readersaria-disabled="true" - Indicates disabled staterole="navigation" - Optional wrapper around paginationWatch how Pagination auto-resets to page 1 when filters change. The FilterBus demo shows Pagination working alongside Smart Table, KPI Cards, Charts, and more!
View FilterBus Dashboard Demo