import { For } from 'solid-js' import styles from '../styles/Pagination.module.css' interface PaginationProps { currentPage: number totalPages: number total: number limit: number onPageChange: (page: number) => void onPerPageChange?: (limit: number) => void perPageOptions?: number[] } const Pagination = (props: PaginationProps) => { const perPageOptions = props.perPageOptions || [20, 50, 100, 200] // Генерируем массив страниц для отображения const pages = () => { const result: (number | string)[] = [] const maxVisiblePages = 5 // Максимальное количество видимых страниц // Всегда показываем первую страницу result.push(1) // Вычисляем диапазон страниц вокруг текущей let startPage = Math.max(2, props.currentPage - Math.floor(maxVisiblePages / 2)) const endPage = Math.min(props.totalPages - 1, startPage + maxVisiblePages - 2) // Корректируем диапазон, если он выходит за границы if (endPage - startPage < maxVisiblePages - 2) { startPage = Math.max(2, endPage - maxVisiblePages + 2) } // Добавляем многоточие после первой страницы, если нужно if (startPage > 2) { result.push('...') } // Добавляем страницы из диапазона for (let i = startPage; i <= endPage; i++) { result.push(i) } // Добавляем многоточие перед последней страницей, если нужно if (endPage < props.totalPages - 1) { result.push('...') } // Всегда показываем последнюю страницу, если есть больше одной страницы if (props.totalPages > 1) { result.push(props.totalPages) } return result } const startIndex = () => (props.currentPage - 1) * props.limit + 1 const endIndex = () => Math.min(props.currentPage * props.limit, props.total) return (
Показано {startIndex()} - {endIndex()} из {props.total}
{(page) => ( <> {page === '...' ? ( ... ) : ( )} )}
{props.onPerPageChange && (
На странице:
)}
) } export default Pagination