修改JavaScript分页代码 实现输入页码点击Go按钮跳转指定页

本方案完全兼容你已实现的动态分页、文本复制、上下页切换、每页条数调整逻辑，不会破坏原有功能。

核心问题定位 #

基于你现有代码结构，跳转功能失效的常见原因：

• 跳转逻辑未和原有分页状态（当前页码、总页数）打通，单独维护了一套独立的页码值，导致渲染时读取的还是旧的当前页
• 未对输入框的值做类型转换、合法性校验，比如直接拿字符串类型的输入值做逻辑判断，触发计算异常
• 跳转修改页码后，没有调用你原有的分页渲染函数，页面自然不会更新内容

修复实现步骤 #

• 所有跳转逻辑和原有分页操作放在同一个作用域，完全复用你已有的全局分页变量（就是你之前实现数组切片、上下页切换用到的currentPage当前页、totalPages总页数、renderPage渲染函数），不新建独立的状态管理逻辑
• 给.jump-btn绑定点击事件时，对输入值做全链路处理：
  1. 提取.value-page输入框的内容，去除首尾空格
  2. 转换为整数类型，过滤非数字的无效输入
  3. 做边界钳位：页码最小为1，最大不超过计算出的总页数，避免输入超范围值导致分页逻辑崩溃
• 完成页码赋值后，直接调用你原有的分页渲染函数，和上一页/下一页的操作走完全一致的渲染流程，从根源上避免原有功能被破坏

可直接嵌入的参考代码 #

// 这段代码写在你原有JS逻辑的同级作用域，保证能访问到已有的全局分页变量
document.querySelector('.jump-btn').addEventListener('click', () => {
  // 获取输入框元素
  const pageInput = document.querySelector('.value-page');
  // 提取并转换输入值
  let targetPage = parseInt(pageInput.value.trim());

  // 无效输入兜底：非数字直接默认跳第一页
  if (isNaN(targetPage)) targetPage = 1;
  // 边界钳位：限制页码在合法范围内
  targetPage = Math.max(1, Math.min(targetPage, totalPages));

  // 复用原有当前页变量，和上下页的赋值逻辑完全一致
  currentPage = targetPage;
  // 复用原有渲染函数，不新写渲染逻辑
  renderPage();
  // 同步输入框显示值为实际生效的页码
  pageInput.value = currentPage;
})

避坑提示 #

• 不要把分页状态（当前页、总条数、每页条数）封在某个独立的局部函数里，否则新写的跳转逻辑会拿不到这些值，出现改了页码不生效的问题
• 不要在跳转功能里新写一套DOM渲染逻辑，完全复用原有给上下页切换写的渲染逻辑，就能保证文本复制、内容动态展示逻辑和之前完全一致
• 记得对输入值做类型转换：输入框的value默认是字符串类型，如果直接拿字符串做页码比较、数组切片计算，很容易出现逻辑判断错误

内容的提问来源于stack exchange，提问作者user15081241