93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Pagination as BootstrapPagination } from 'react-bootstrap';
|
|
|
|
const Pagination = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
maxVisiblePages = 5
|
|
}) => {
|
|
if (totalPages <= 1) return null;
|
|
|
|
const items = [];
|
|
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
|
|
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
|
|
|
// Корректируем, если не хватает страниц
|
|
if (endPage - startPage + 1 < maxVisiblePages) {
|
|
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
|
}
|
|
|
|
// Кнопка "Назад"
|
|
items.push(
|
|
<BootstrapPagination.Prev
|
|
key="prev"
|
|
disabled={currentPage === 1}
|
|
onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
|
|
/>
|
|
);
|
|
|
|
// Первая страница
|
|
if (startPage > 1) {
|
|
items.push(
|
|
<BootstrapPagination.Item
|
|
key={1}
|
|
active={1 === currentPage}
|
|
onClick={() => onPageChange(1)}
|
|
>
|
|
1
|
|
</BootstrapPagination.Item>
|
|
);
|
|
|
|
if (startPage > 2) {
|
|
items.push(<BootstrapPagination.Ellipsis key="start-ellipsis" />);
|
|
}
|
|
}
|
|
|
|
// Видимые страницы
|
|
for (let page = startPage; page <= endPage; page++) {
|
|
items.push(
|
|
<BootstrapPagination.Item
|
|
key={page}
|
|
active={page === currentPage}
|
|
onClick={() => onPageChange(page)}
|
|
>
|
|
{page}
|
|
</BootstrapPagination.Item>
|
|
);
|
|
}
|
|
|
|
// Последняя страница
|
|
if (endPage < totalPages) {
|
|
if (endPage < totalPages - 1) {
|
|
items.push(<BootstrapPagination.Ellipsis key="end-ellipsis" />);
|
|
}
|
|
|
|
items.push(
|
|
<BootstrapPagination.Item
|
|
key={totalPages}
|
|
active={totalPages === currentPage}
|
|
onClick={() => onPageChange(totalPages)}
|
|
>
|
|
{totalPages}
|
|
</BootstrapPagination.Item>
|
|
);
|
|
}
|
|
|
|
// Кнопка "Вперед"
|
|
items.push(
|
|
<BootstrapPagination.Next
|
|
key="next"
|
|
disabled={currentPage === totalPages}
|
|
onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<BootstrapPagination className="justify-content-center mt-4">
|
|
{items}
|
|
</BootstrapPagination>
|
|
);
|
|
};
|
|
|
|
export default Pagination; |