js 分页实现
分页实现方法
分页功能在前端开发中非常常见，可以通过多种方式实现。以下是几种常见的分页实现方法：
前端分页实现
使用数组的slice方法可以实现简单的前端分页：
const paginate = (array, pageNumber, pageSize) => {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
};后端API分页实现
与后端配合实现分页通常需要传递分页参数：
const fetchPaginatedData = async (page, size) => {
const response = await fetch(`/api/data?page=${page}&size=${size}`);
return response.json();
};分页组件实现
创建一个可复用的分页组件：
function Pagination({ currentPage, totalPages, onPageChange }) {
return (
<div className="pagination">
<button
disabled={currentPage === 1}
onClick={() => onPageChange(currentPage - 1)}
>
上一页
</button>
{Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
<button
key={page}
className={currentPage === page ? 'active' : ''}
onClick={() => onPageChange(page)}
>
{page}
</button>
))}
<button
disabled={currentPage === totalPages}
onClick={() => onPageChange(currentPage + 1)}
>
下一页
</button>
</div>
);
}分页逻辑处理
处理分页数据时的常见逻辑：
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
const handlePageChange = (page) => {
setCurrentPage(page);
// 可以在这里触发数据获取或过滤逻辑
};
const paginatedData = data.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
);分页样式处理
基本的分页样式示例：
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
}
.pagination button.active {
background: #007bff;
color: white;
border-color: #007bff;
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}分页最佳实践
- 对于大数据集，建议使用后端分页而非前端分页
- 添加页面跳转输入框提升用户体验
- 显示总页数和当前页码信息
- 考虑实现每页显示数量可配置功能
- 移动端适配时可能需要调整分页控件的显示方式
