import React from 'react';
interface CustomPaginationProps {
current: number;
total: number;
pageSize: number;
onPageChange: (page: number) => void;
}
const CustomPagination: React.FC<CustomPaginationProps> = ({
current,
total,
pageSize,
onPageChange,
}) => {
const totalPages = Math.ceil(total / pageSize);
console.log(current,"ccccccccccccc")
console.log(total,"ddddddddd")
console.log(pageSize,"
eeeeeeeee")
const handlePrev = () => {
if (current > 1) onPageChange(current - 1);
};
const handleNext = () => {
if (current < totalPages) onPageChange(current + 1);
};
const renderPageNumbers = () => {
const pages = [];
for (let i = 1; i <= totalPages; i++) {
pages.push(
<button
key={i}
onClick={() => onPageChange(i)}
style={{
margin: '0 4px',
padding: '4px 8px',
fontWeight: i === current ? 'bold' : 'normal',
background: i === current ? '#1890ff' : 'transparent',
color: i === current ? '#fff' : '#000',
border: '1px solid #ddd',
cursor: 'pointer',
}}
>
{i}
</button>
);
}
return pages;
};
if (totalPages <= 1) return null;
return (
<div style={{ textAlign: 'right', marginTop: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8 }}>
<button onClick={handlePrev} disabled={current === 1}>
上一页
</button>
<div style={{ display: 'flex', flexWrap: 'nowrap' }}>{renderPageNumbers()}</div>
<button onClick={handleNext} disabled={current === totalPages}>
下一页
</button>
<span style={{ marginLeft: 10, color: '#666' }}>共 {total} 条</span>
</div>
</div>
);
};
export default CustomPagination;
以上分页组件 打印出1 'ccccccccccccc'
CustomPagination.tsx:18 5 'ddddddddd'
CustomPagination.tsx:19 10 '
eeeeeeeee' 但是没有显示
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
