添加分页组件
- 实现分页导航功能 - 添加分页样式
This commit is contained in:
Leo
parent
269c66d1ac
commit
a3561609f5
120
src/components/Pagination.css
Normal file
120
src/components/Pagination.css
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
/* 自定义分页组件样式 */
|
||||||
|
.custom-pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
margin: 0 -24px -24px -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
padding-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item:hover {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item.active {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item.active:hover {
|
||||||
|
background-color: #40a9ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #d9d9d9;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-item.disabled:hover {
|
||||||
|
color: #d9d9d9;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-ellipsis {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
cursor: default;
|
||||||
|
border: none;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-jumper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-page-info {
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: right;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.custom-pagination {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-info {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-jumper {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
210
src/components/Pagination.js
Normal file
210
src/components/Pagination.js
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
/**
|
||||||
|
* 自定义分页组件
|
||||||
|
* 支持页码跳转、页面大小选择等功能
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { Select, Input, Button, Space, Typography } from 'antd';
|
||||||
|
import './Pagination.css';
|
||||||
|
import {
|
||||||
|
LeftOutlined,
|
||||||
|
RightOutlined,
|
||||||
|
DoubleLeftOutlined,
|
||||||
|
DoubleRightOutlined
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
const Pagination = ({
|
||||||
|
current = 1,
|
||||||
|
total = 0,
|
||||||
|
pageSize = 10,
|
||||||
|
showSizeChanger = true,
|
||||||
|
showQuickJumper = true,
|
||||||
|
showTotal = true,
|
||||||
|
onChange,
|
||||||
|
onShowSizeChange,
|
||||||
|
pageSizeOptions = ['10', '20', '50', '100'],
|
||||||
|
style = {}
|
||||||
|
}) => {
|
||||||
|
const totalPages = Math.ceil(total / pageSize);
|
||||||
|
|
||||||
|
// 计算显示的页码范围
|
||||||
|
const getVisiblePages = () => {
|
||||||
|
const pages = [];
|
||||||
|
const delta = 2; // 当前页前后显示的页数
|
||||||
|
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
// 总页数较少时显示所有页码
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 总页数较多时显示部分页码
|
||||||
|
let start = Math.max(1, current - delta);
|
||||||
|
let end = Math.min(totalPages, current + delta);
|
||||||
|
|
||||||
|
if (current <= delta + 1) {
|
||||||
|
end = Math.min(totalPages, 2 * delta + 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (current >= totalPages - delta) {
|
||||||
|
start = Math.max(1, totalPages - 2 * delta - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (start > 1) {
|
||||||
|
pages.push(1);
|
||||||
|
if (start > 2) {
|
||||||
|
pages.push('...');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (end < totalPages) {
|
||||||
|
if (end < totalPages - 1) {
|
||||||
|
pages.push('...');
|
||||||
|
}
|
||||||
|
pages.push(totalPages);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return pages;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理页码点击
|
||||||
|
const handlePageClick = (page) => {
|
||||||
|
if (page !== current && page >= 1 && page <= totalPages) {
|
||||||
|
onChange?.(page, pageSize);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理页面大小变化
|
||||||
|
const handlePageSizeChange = (newPageSize) => {
|
||||||
|
const newCurrent = Math.min(current, Math.ceil(total / newPageSize));
|
||||||
|
onShowSizeChange?.(newCurrent, newPageSize);
|
||||||
|
onChange?.(newCurrent, newPageSize);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理快速跳转
|
||||||
|
const handleQuickJump = (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
const page = parseInt(e.target.value, 10);
|
||||||
|
if (page >= 1 && page <= totalPages) {
|
||||||
|
handlePageClick(page);
|
||||||
|
e.target.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用CSS类而不是内联样式
|
||||||
|
|
||||||
|
if (total === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="custom-pagination" style={style}>
|
||||||
|
{/* 左侧信息显示 */}
|
||||||
|
<div className="pagination-info">
|
||||||
|
{showTotal && (
|
||||||
|
<Text type="secondary">
|
||||||
|
共 {total} 条记录
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showSizeChanger && (
|
||||||
|
<Space>
|
||||||
|
<Text type="secondary">每页显示</Text>
|
||||||
|
<Select
|
||||||
|
value={pageSize}
|
||||||
|
onChange={handlePageSizeChange}
|
||||||
|
size="small"
|
||||||
|
style={{ width: '80px' }}
|
||||||
|
>
|
||||||
|
{pageSizeOptions.map(size => (
|
||||||
|
<Option key={size} value={parseInt(size, 10)}>
|
||||||
|
{size}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Text type="secondary">条</Text>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 中间页码控制 */}
|
||||||
|
<div className="pagination-controls">
|
||||||
|
{/* 首页和上一页 */}
|
||||||
|
<div
|
||||||
|
className={`pagination-page-item ${current === 1 ? 'disabled' : ''}`}
|
||||||
|
onClick={() => current !== 1 && handlePageClick(1)}
|
||||||
|
title="首页"
|
||||||
|
>
|
||||||
|
<DoubleLeftOutlined />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`pagination-page-item ${current === 1 ? 'disabled' : ''}`}
|
||||||
|
onClick={() => current !== 1 && handlePageClick(current - 1)}
|
||||||
|
title="上一页"
|
||||||
|
>
|
||||||
|
<LeftOutlined />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 页码 */}
|
||||||
|
{getVisiblePages().map((page, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={
|
||||||
|
page === '...'
|
||||||
|
? 'pagination-ellipsis'
|
||||||
|
: `pagination-page-item ${page === current ? 'active' : ''}`
|
||||||
|
}
|
||||||
|
onClick={() => page !== '...' && handlePageClick(page)}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* 下一页和末页 */}
|
||||||
|
<div
|
||||||
|
className={`pagination-page-item ${current === totalPages ? 'disabled' : ''}`}
|
||||||
|
onClick={() => current !== totalPages && handlePageClick(current + 1)}
|
||||||
|
title="下一页"
|
||||||
|
>
|
||||||
|
<RightOutlined />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`pagination-page-item ${current === totalPages ? 'disabled' : ''}`}
|
||||||
|
onClick={() => current !== totalPages && handlePageClick(totalPages)}
|
||||||
|
title="末页"
|
||||||
|
>
|
||||||
|
<DoubleRightOutlined />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧快速跳转 */}
|
||||||
|
<div className="pagination-jumper">
|
||||||
|
{showQuickJumper && (
|
||||||
|
<Space>
|
||||||
|
<Text type="secondary">跳至</Text>
|
||||||
|
<Input
|
||||||
|
size="small"
|
||||||
|
style={{ width: '50px' }}
|
||||||
|
placeholder=""
|
||||||
|
onKeyPress={handleQuickJump}
|
||||||
|
/>
|
||||||
|
<Text type="secondary">页</Text>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
<div className="pagination-page-info">
|
||||||
|
<Text type="secondary">
|
||||||
|
{current} / {totalPages} 页
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Pagination;
|
||||||
Loading…
Reference in New Issue
Block a user