js实现翻页
实现翻页功能的基本方法
使用JavaScript实现翻页功能通常涉及以下几个关键步骤：
监听翻页事件 为翻页按钮或页码元素添加事件监听器，处理点击事件并触发数据加载或页面跳转。例如：
document.getElementById('nextPage').addEventListener('click', loadNextPage);维护当前页码状态 使用变量存储当前页码，并在翻页时更新这个值：
let currentPage = 1;
function loadNextPage() {
currentPage++;
fetchData(currentPage);
}数据加载与渲染 通过AJAX或Fetch API从服务器获取分页数据，并更新页面内容：
function fetchData(page) {
fetch(`/api/data?page=${page}`)
.then(response => response.json())
.then(data => renderItems(data));
}前端分页与后端分页
前端分页实现 当数据量较小时，可以一次性加载所有数据并在前端进行分页处理：
function paginateFrontend(items, page, perPage) {
const start = (page - 1) * perPage;
return items.slice(start, start + perPage);
}后端分页实现 更常见的做法是请求服务器返回指定页码的数据，通常配合LIMIT和OFFSETSQL语句：
// 请求示例
fetch(`/api/items?page=${page}&size=${pageSize}`)分页UI组件实现
基础页码导航 创建可点击的页码按钮，并高亮显示当前页：
function renderPagination(totalPages) {
let html = '';
for (let i = 1; i <= totalPages; i++) {
html += `<button class="${i === currentPage ? 'active' : ''}">${i}</button>`;
}
document.getElementById('pagination').innerHTML = html;
}高级分页控件 实现带有上一页/下一页、首尾页跳转的完整分页组件：
function createAdvancedPagination(current, total) {
// 逻辑处理页码范围
const start = Math.max(1, current - 2);
const end = Math.min(total, current + 2);
// 生成HTML字符串
let html = `<button ${current === 1 ? 'disabled' : ''}>«</button>`;
// 添加页码按钮
html += `</div>`;
}性能优化考虑
预加载策略 可以在用户浏览当前页时，提前加载下一页数据：
function prefetchNextPage() {
if (currentPage < totalPages) {
fetch(`/api/data?page=${currentPage + 1}`, { method: 'HEAD' });
}
}滚动加载实现 对于无限滚动风格的分页，可以监听滚动事件：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
loadNextPage();
}
});框架实现示例
使用Vue.js实现 在Vue组件中可以更简洁地管理分页状态：
export default {
data() {
return {
currentPage: 1,
totalPages: 10
};
},
methods: {
changePage(page) {
this.currentPage = page;
this.fetchData();
}
}
};React组件示例 React中可以使用状态钩子管理分页：
function Pagination() {
const [page, setPage] = useState(1);
const handlePageChange = (newPage) => {
setPage(newPage);
loadData(newPage);
};
// 渲染分页UI
}注意事项
边界条件处理 确保页码不会超出有效范围：
function goToPage(newPage) {
if (newPage < 1 || newPage > totalPages) return;
currentPage = newPage;
}加载状态反馈 在数据加载期间显示加载指示器：
let isLoading = false;
async function fetchData() {
isLoading = true;
showLoader();
// 获取数据...
isLoading = false;
hideLoader();
}错误处理 为分页请求添加错误处理逻辑：
fetch(url).catch(error => {
console.error('分页请求失败:', error);
showErrorMsg();
});
