页码跳转是js代码实现
实现页码跳转的JavaScript方法
监听页码输入框事件
通过监听输入框的keypress或input事件实现实时响应：
document.getElementById('pageInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const targetPage = parseInt(this.value);
if (!isNaN(targetPage)) jumpToPage(targetPage);
}
});核心跳转函数
创建处理实际跳转逻辑的函数：
function jumpToPage(pageNumber) {
const totalPages = 10; // 实际应替换为动态获取的总页数
if (pageNumber < 1 || pageNumber > totalPages) {
alert('页码超出范围');
return;
}
// 实际跳转逻辑（示例为AJAX请求）
fetch(`/api/data?page=${pageNumber}`)
.then(response => updatePageContent(response));
}分页控件动态生成
自动生成分页导航按钮：
function renderPagination(currentPage, totalPages) {
const container = document.getElementById('pagination');
container.innerHTML = '';
// 生成数字页码按钮
for (let i = 1; i <= totalPages; i++) {
const btn = document.createElement('button');
btn.textContent = i;
btn.className = i === currentPage ? 'active' : '';
btn.onclick = () => jumpToPage(i);
container.appendChild(btn);
}
}页面内容更新
处理跳转后的内容更新：
function updatePageContent(response) {
document.getElementById('content').innerHTML = response.html;
renderPagination(response.currentPage, response.totalPages);
window.scrollTo(0, 0); // 跳转后返回顶部
}样式控制示例
为活动页码添加视觉反馈：
.pagination button.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}初始化加载
页面加载时初始化分页：
document.addEventListener('DOMContentLoaded', () => {
jumpToPage(1); // 默认加载第一页
});
