Pagination Generator

Pagination Configuration

Total Pages

Current Page

Visible Page Numbers

Pagination Style

Size

Color Theme

Previous Text

Next Text

Generated Code

Live Preview

Pagination Examples

Pagination Generator

Generate pagination navigation with various styles and configurations. Perfect for multi-page content, data tables, and search results.

Features

Multiple Styles: Default, rounded, square, modern, minimal, and button styles
Flexible Configuration: Customizable page numbers, navigation controls, and text
Color Themes: Pre-defined color schemes or custom colors
Responsive Design: Mobile-friendly pagination layout
Smart Ellipsis: Automatic ellipsis for large page ranges
Accessibility: ARIA labels and keyboard navigation support

Use Cases

Blog post navigation
Product listing pages
Search result pages

Data table pagination
Image gallery navigation
Documentation pages

Discover Toolexe, a comprehensive collection of free web tools designed for both regular users and developers. Everything is quick, free, and available for use, including time calculators, smart unit converters, HTML formatters, and useful JSON tools. No restrictions or signup the tools you require, when you need them.

Tools Categories

`;paginationPreview.innerHTML = html;applyPaginationStyles(css);} function getPaginationConfig() {return {totalPages: parseInt(document.getElementById('total-pages').value) || 10,currentPage: parseInt(document.getElementById('current-page').value) || 1,visiblePages: parseInt(document.getElementById('visible-pages').value) || 5,style: document.getElementById('pagination-style').value,size: document.getElementById('pagination-size').value,colorTheme: document.getElementById('color-theme').value,activeColor: document.getElementById('pagination-active-color').value,hoverColor: document.getElementById('pagination-hover-color').value,showFirstLast: document.getElementById('show-first-last').checked,showPrevNext: document.getElementById('show-prev-next').checked,showEllipsis: document.getElementById('show-ellipsis').checked,showPageInfo: document.getElementById('show-page-info').checked,showTotalPages: document.getElementById('show-total-pages').checked,centerAlign: document.getElementById('center-align').checked,prevText: document.getElementById('prev-text').value,nextText: document.getElementById('next-text').value};} function generatePaginationCode(config) {const paginationClass = getPaginationClass(config);const pages = generatePageNumbers(config);let html = '';if (config.showPageInfo) {html += `

\n`;html += ` Page ${config.currentPage} of ${config.totalPages}\n`;html += `

\n`;} html += `

\n`;html += `

\n`;html += ` First\n`;html += `
\n`;html += ` ${config.prevText}\n`;html += `
\n`;html += ` ...\n`;html += `
\n`;html += ` ${page}\n`;html += `
\n`;html += ` ${config.nextText}\n`;html += `
\n`;html += ` Last\n`;html += `

\n`;html += `

\n`;if (config.showTotalPages) {html += `

\n`;html += ` Total: ${config.totalPages} pages\n`;html += `

\n`;} const css = generatePaginationCSS(config);const js = generatePaginationJS(config);return { html, css, js };} function getPaginationClass(config) {let classes = ['pagination'];classes.push(`pagination-${config.style}`);classes.push(`pagination-${config.size}`);if (config.colorTheme !== 'default' && config.colorTheme !== 'custom') {classes.push(`pagination-${config.colorTheme}`);} if (config.centerAlign) {classes.push('justify-content-center');} return classes.join(' ');} function generatePageNumbers(config) {const pages = [];const { currentPage, totalPages, visiblePages, showEllipsis } = config;if (totalPages <= visiblePages) {for (let i = 1; i <= totalPages; i++) {pages.push(i);}} else {const halfVisible = Math.floor(visiblePages / 2);let startPage = Math.max(1, currentPage - halfVisible);let endPage = Math.min(totalPages, currentPage + halfVisible);if (currentPage <= halfVisible) {endPage = visiblePages;} else if (currentPage > totalPages - halfVisible) {startPage = totalPages - visiblePages + 1;} if (startPage > 1 && showEllipsis) {pages.push(1);if (startPage > 2) {pages.push('...');}} for (let i = startPage; i <= endPage; i++) {pages.push(i);} if (endPage < totalPages && showEllipsis) {if (endPage < totalPages - 1) {pages.push('...');} pages.push(totalPages);}} return pages;} function generatePaginationCSS(config) {const colors = getPaginationColors(config);return `.pagination {display: flex;padding-left: 0;list-style: none;border-radius: 0.25rem;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;} .page-item {margin: 0 2px;} .page-link {position: relative;display: block;padding: 0.5rem 0.75rem;margin-left: -1px;line-height: 1.25;color: ${colors.link};text-decoration: none;background-color: ${colors.bg};border: 1px solid ${colors.border};transition: all 0.15s ease-in-out;} .page-link:hover {z-index: 2;color: ${colors.linkHover};text-decoration: none;background-color: ${colors.bgHover};border-color: ${colors.borderHover};} .page-item.active .page-link {z-index: 3;color: ${colors.activeText};background-color: ${colors.activeBg};border-color: ${colors.activeBorder};} .page-item.disabled .page-link {color: ${colors.disabled};pointer-events: none;cursor: auto;background-color: ${colors.disabledBg};border-color: ${colors.disabledBorder};} .pagination-small .page-link {padding: 0.25rem 0.5rem;font-size: 0.875rem;line-height: 1.5;} .pagination-medium .page-link {padding: 0.5rem 0.75rem;font-size: 1rem;line-height: 1.25;} .pagination-large .page-link {padding: 0.75rem 1.5rem;font-size: 1.125rem;line-height: 1.5;} .pagination-rounded .page-link {border-radius: 0.25rem;} .pagination-square .page-link {border-radius: 0;} .pagination-modern .page-link {border-radius: 0.5rem;border: 2px solid transparent;background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);font-weight: 500;} .pagination-modern .page-item.active .page-link {background: linear-gradient(135deg, ${colors.activeBg} 0%, ${colors.activeBorder} 100%);border-color: ${colors.activeBorder};} .pagination-minimal .page-link {border: none;background: transparent;font-weight: 500;} .pagination-minimal .page-item.active .page-link {background-color: ${colors.activeBg};border-radius: 0.25rem;} .pagination-buttons .page-link {border-radius: 0.375rem;border: 1px solid ${colors.border};background-color: ${colors.bg};font-weight: 500;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);} .pagination-buttons .page-link:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);transform: translateY(-1px);} .pagination-buttons .page-item.active .page-link {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);} ${generatePaginationColorSchemes(config)} .pagination-info,.pagination-total {text-align: center;margin: 0.5rem 0;color: #6c757d;font-size: 0.9rem;} .pagination-info {margin-bottom: 0.5rem;} .pagination-total {margin-top: 0.5rem;} @media (max-width: 576px) {.pagination {flex-wrap: wrap;justify-content: center;} .page-item {margin: 1px;} .page-link {padding: 0.375rem 0.5rem;font-size: 0.875rem;} .pagination-large .page-link {padding: 0.5rem 0.75rem;font-size: 1rem;} .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {display: none;}}`;} function getPaginationColors(config) {if (config.colorTheme === 'custom') {return {link: '#007bff',linkHover: config.hoverColor,bg: '#fff',bgHover: '#e9ecef',border: '#dee2e6',borderHover: '#adb5bd',activeText: '#fff',activeBg: config.activeColor,activeBorder: config.activeColor,disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'};} const colorSchemes = {default: {link: '#007bff',linkHover: '#0056b3',bg: '#fff',bgHover: '#e9ecef',border: '#dee2e6',borderHover: '#adb5bd',activeText: '#fff',activeBg: '#007bff',activeBorder: '#007bff',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},primary: {link: '#007bff',linkHover: '#0056b3',bg: '#fff',bgHover: '#e7f1ff',border: '#b8daff',borderHover: '#9fcdff',activeText: '#fff',activeBg: '#007bff',activeBorder: '#007bff',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},secondary: {link: '#6c757d',linkHover: '#545b62',bg: '#fff',bgHover: '#f8f9fa',border: '#dee2e6',borderHover: '#adb5bd',activeText: '#fff',activeBg: '#6c757d',activeBorder: '#6c757d',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},success: {link: '#28a745',linkHover: '#1e7e34',bg: '#fff',bgHover: '#d4edda',border: '#c3e6cb',borderHover: '#a3d9a4',activeText: '#fff',activeBg: '#28a745',activeBorder: '#28a745',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},info: {link: '#17a2b8',linkHover: '#117a8b',bg: '#fff',bgHover: '#d1ecf1',border: '#bee5eb',borderHover: '#a6d9e0',activeText: '#fff',activeBg: '#17a2b8',activeBorder: '#17a2b8',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},warning: {link: '#ffc107',linkHover: '#d39e00',bg: '#fff',bgHover: '#fff3cd',border: '#ffeaa7',borderHover: '#ffdf7e',activeText: '#212529',activeBg: '#ffc107',activeBorder: '#ffc107',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'},danger: {link: '#dc3545',linkHover: '#bd2130',bg: '#fff',bgHover: '#f8d7da',border: '#f5c6cb',borderHover: '#f1b0b7',activeText: '#fff',activeBg: '#dc3545',activeBorder: '#dc3545',disabled: '#6c757d',disabledBg: '#fff',disabledBorder: '#dee2e6'}};return colorSchemes[config.colorTheme] || colorSchemes.default;} function generatePaginationColorSchemes(config) {const schemes = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];let css = '';schemes.forEach(scheme => {const colors = getPaginationColors({ colorTheme: scheme });css += `.pagination-${scheme} .page-link {color: ${colors.link};background-color: ${colors.bg};border-color: ${colors.border};} .pagination-${scheme} .page-link:hover {color: ${colors.linkHover};background-color: ${colors.bgHover};border-color: ${colors.borderHover};} .pagination-${scheme} .page-item.active .page-link {color: ${colors.activeText};background-color: ${colors.activeBg};border-color: ${colors.activeBorder};} `;});return css;} function generatePaginationJS(config) {return `// Pagination functionality document.addEventListener('click', function(e) {if (e.target.classList.contains('page-link') && !e.target.closest('.page-item').classList.contains('disabled')) {e.preventDefault();const page = e.target.getAttribute('data-page');if (page) {console.log('Navigate to page:', page);}}});document.addEventListener('keydown', function(e) {if (e.target.classList.contains('page-link')) {let nextElement = null;switch(e.key) {case 'ArrowLeft':nextElement = e.target.closest('.page-item').previousElementSibling?.querySelector('.page-link');break;case 'ArrowRight':nextElement = e.target.closest('.page-item').nextElementSibling?.querySelector('.page-link');break;case 'Home':nextElement = document.querySelector('.pagination .page-item:first-child .page-link');break;case 'End':nextElement = document.querySelector('.pagination .page-item:last-child .page-link');break;} if (nextElement && !nextElement.closest('.page-item').classList.contains('disabled')) {e.preventDefault();nextElement.focus();}}});function updatePagination(currentPage, totalPages) {document.querySelectorAll('.page-item.active').forEach(item => {item.classList.remove('active');});const currentPageElement = document.querySelector(\`[data-page="\${currentPage}"]\`);if (currentPageElement) {currentPageElement.closest('.page-item').classList.add('active');} const pageInfo = document.querySelector('.pagination-info span');if (pageInfo) {pageInfo.textContent = \`Page \${currentPage} of \${totalPages}\`;} const prevButton = document.querySelector('.page-link[aria-label="Previous page"]');const nextButton = document.querySelector('.page-link[aria-label="Next page"]');if (prevButton) {prevButton.closest('.page-item').classList.toggle('disabled', currentPage <= 1);} if (nextButton) {nextButton.closest('.page-item').classList.toggle('disabled', currentPage >= totalPages);}}} function previewPagination() {document.getElementById('pagination-preview').scrollIntoView({ behavior: 'smooth' });} function applyPaginationStyles(css) {let existingStyle = document.getElementById('pagination-styles');if (existingStyle) {existingStyle.remove();} const style = document.createElement('style');style.id = 'pagination-styles';style.textContent = css;document.head.appendChild(style);} function copyCode() {generatedCode.select();document.execCommand('copy');const originalText = copyBtn.textContent;copyBtn.textContent = 'Copied!';copyBtn.classList.add('btn-success');copyBtn.classList.remove('btn-outline-success');setTimeout(() => {copyBtn.textContent = originalText;copyBtn.classList.remove('btn-success');copyBtn.classList.add('btn-outline-success');}, 2000);} generatePagination();});