页码跳转是js代码实现
页码跳转的实现方法
页码跳转功能常见于分页组件中，允许用户输入特定页码后跳转到目标页。以下是几种典型实现方式：
基础DOM操作实现
通过监听输入框事件和按钮点击触发跳转：
document.getElementById('jumpBtn').addEventListener('click', function() {
const pageInput = document.getElementById('pageInput');
const targetPage = parseInt(pageInput.value);
if (!isNaN(targetPage) && targetPage > 0) {
// 实际跳转逻辑替换此处
console.log(`跳转到第${targetPage}页`);
// location.href = `?page=${targetPage}`;
} else {
alert('请输入有效页码');
}
});配合分页组件使用
与常见分页库（如Pagination.js）结合时：
$('#pagination').pagination({
// 其他配置...
jumpCallback: function(page) {
loadData(page); // 自定义数据加载函数
}
});
function manualJump() {
const pageNum = $('#manualPage').val();
$('#pagination').pagination('update', { current: pageNum });
}路由型SPA应用实现
在单页应用中结合路由：
function handlePageJump() {
const newPage = document.querySelector('#pageJumpInput').value;
history.pushState(null, '', `#/page/${newPage}`);
renderPageContent(newPage); // 渲染对应页内容
}
window.addEventListener('popstate', () => {
const currentPage = extractPageFromUrl(); // 从URL提取页码
renderPageContent(currentPage);
});带验证的增强实现
添加输入验证和边界检查：
function validateAndJump(maxPage) {
let inputPage = parseInt(document.getElementById('jumpInput').value);
if (isNaN(inputPage)) {
showError('必须输入数字');
return;
}
inputPage = Math.max(1, Math.min(inputPage, maxPage));
window.location.search = `?page=${inputPage}`;
}关键注意事项
- 输入验证必不可少，需处理非数字、负值、超范围值等情况
- 对于动态加载数据的分页，跳转后需触发数据请求
- 考虑添加防抖处理（特别是自动跳转场景）
- 移动端需优化输入体验，可调用数字键盘：
<input type="number" pattern="[0-9]*" inputmode="numeric">
完整示例组件
<div class="page-jumper">
<span>跳转到</span>
<input type="number" min="1" id="pageInput">
<span>页</span>
<button id="jumpButton">确定</button>
</div>
<script>
document.getElementById('jumpButton').addEventListener('click', () => {
const input = document.getElementById('pageInput');
const page = parseInt(input.value);
const totalPages = 10; // 应从实际数据获取
if (page >= 1 && page <= totalPages) {
updatePagination(page); // 实际分页更新函数
} else {
input.classList.add('error');
}
});
</script>
