js前端实现分页
前端分页实现方法
分页是前端开发中常见的需求，以下介绍几种实现方式：
基于数组的分页
对于已经加载到前端的数据，可以通过数组切片实现分页：
function paginate(array, pageNumber, pageSize) {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
const data = [1,2,3,4,5,6,7,8,9,10];
const currentPage = 2;
const itemsPerPage = 3;
const paginatedData = paginate(data, currentPage, itemsPerPage);结合API的分页
当数据量较大时，通常需要后端配合实现分页：
async function fetchPaginatedData(page, size) {
const response = await fetch(`/api/data?page=${page}&size=${size}`);
return response.json();
}
// 使用示例
fetchPaginatedData(1, 10).then(data => {
console.log(data);
});分页组件实现
一个简单的分页UI组件可以这样实现：
class Pagination {
constructor(totalItems, itemsPerPage, currentPage = 1) {
this.totalItems = totalItems;
this.itemsPerPage = itemsPerPage;
this.currentPage = currentPage;
this.totalPages = Math.ceil(totalItems / itemsPerPage);
}
getPages() {
let startPage, endPage;
if (this.totalPages <= 10) {
startPage = 1;
endPage = this.totalPages;
} else {
if (this.currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (this.currentPage + 4 >= this.totalPages) {
startPage = this.totalPages - 9;
endPage = this.totalPages;
} else {
startPage = this.currentPage - 5;
endPage = this.currentPage + 4;
}
}
return Array.from({length: endPage - startPage + 1}, (_, i) => startPage + i);
}
}使用现有库
流行的前端库如React、Vue等都有成熟的分页组件：
- React: react-paginate
- Vue: vue-paginate
- jQuery: DataTables
性能优化考虑
对于大数据量分页：
- 实现虚拟滚动代替传统分页
- 使用懒加载技术
- 考虑无限滚动模式
分页实现应根据具体项目需求选择合适方案，小型数据集可使用纯前端分页，大型数据集建议采用前后端协作方式。
