js怎么实现分页效果
实现分页效果的方法
前端分页（纯JavaScript）
使用数组切片实现前端分页，适用于数据量较小的情况。
const data = [/* 原始数据数组 */];
const itemsPerPage = 10;
let currentPage = 1;
function paginate(items, page = 1, perPage = 10) {
const offset = (page - 1) * perPage;
return items.slice(offset, offset + perPage);
}
function renderPage() {
const paginatedData = paginate(data, currentPage, itemsPerPage);
// 渲染分页数据到DOM
}
function updatePaginationUI() {
const totalPages = Math.ceil(data.length / itemsPerPage);
// 更新页码显示和按钮状态
}后端API分页
与后端配合实现分页，通常使用limit和offset参数。
async function fetchPaginatedData(page, size) {
const response = await fetch(`/api/data?page=${page}&size=${size}`);
return await response.json();
}
// 使用示例
fetchPaginatedData(1, 10).then(data => {
// 处理返回的分页数据
});完整分页组件实现
创建包含导航按钮的分页组件。
class Pagination {
constructor({ totalItems, itemsPerPage, currentPage = 1 }) {
this.totalItems = totalItems;
this.itemsPerPage = itemsPerPage;
this.currentPage = currentPage;
this.totalPages = Math.ceil(totalItems / itemsPerPage);
}
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
return true;
}
return false;
}
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
return true;
}
return false;
}
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
return true;
}
return false;
}
}分页UI实现示例
结合DOM操作的分页界面实现。
function createPaginationUI(totalPages, currentPage) {
const pagination = document.createElement('div');
pagination.className = 'pagination';
// 上一页按钮
const prevBtn = document.createElement('button');
prevBtn.textContent = '上一页';
prevBtn.disabled = currentPage === 1;
prevBtn.addEventListener('click', () => {
if (currentPage > 1) goToPage(currentPage - 1);
});
// 页码按钮
for (let i = 1; i <= totalPages; i++) {
const pageBtn = document.createElement('button');
pageBtn.textContent = i;
pageBtn.className = i === currentPage ? 'active' : '';
pageBtn.addEventListener('click', () => goToPage(i));
pagination.appendChild(pageBtn);
}
// 下一页按钮
const nextBtn = document.createElement('button');
nextBtn.textContent = '下一页';
nextBtn.disabled = currentPage === totalPages;
nextBtn.addEventListener('click', () => {
if (currentPage < totalPages) goToPage(currentPage + 1);
});
document.body.appendChild(pagination);
}无限滚动分页
适用于移动端或需要流畅滚动体验的场景。
let isLoading = false;
let currentPage = 1;
window.addEventListener('scroll', () => {
if (isLoading) return;
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 100) {
isLoading = true;
currentPage++;
loadMoreData(currentPage);
}
});
async function loadMoreData(page) {
const data = await fetchPaginatedData(page, 10);
// 追加数据到DOM
isLoading = false;
}使用第三方库
推荐使用成熟的库如simple-pagination.js或twbs-pagination。
// 使用jQuery分页插件示例
$('#pagination').twbsPagination({
totalPages: 10,
visiblePages: 5,
onPageClick: function(event, page) {
fetchData(page);
}
});这些方法涵盖了从简单到复杂的分页实现方案，可以根据项目需求选择合适的实现方式。前端分页适合少量数据，后端分页适合大数据量，无限滚动适合移动优先的体验，而第三方库可以快速实现标准化分页功能。
