简单模拟分页功能的实现-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59128154/article/details/119815325

该博客探讨了一种用于显示分页的JavaScript函数，考虑了总条数、每页显示条数以及可见分页按钮的数量。函数确保所选页面位于中间，提供更好的用户体验。它适用于前端开发中的数据列表分页展示，特别是在大量数据需要分页处理的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说, 直接代码走起…

  // btnCount: 最多能看到几个分页按钮
  // total: 信息总条数
  // size: 每页几条信息
  // page: 当前第几页

  function f(total, size, page, btnCount = 5) {
    // 能看到的页码集合
    let arr = []

    // 根据总条数和每页几条得出总页数
    const pages = total / size

    // 生成总页数数组
    let pagesArr = []
    for (let i = pages; i > 0 && i <= pages; i--) {
      pagesArr.unshift(i)
    }

    // 判断分页首尾页码最小居中位置 向上取整
    const halfBtnCount = Math.ceil(btnCount / 2)

    if (page <= halfBtnCount) {
      // 如果所选页码在首位两端小于分页首页码最小居中位置 则从 总页数数组头部 截取 分页按钮个数 的数组
      arr = pagesArr.slice(0, btnCount)
    } else if (page >= pagesArr.length - halfBtnCount) {
      // 如果所选页码在首位两端大于分页首页码最小居中位置 则从总页数数组尾部截取 分页按钮个数 的数组
      arr = pagesArr.slice(-btnCount)
    } else {
      // 如所选页不在 总页数数组 的首位部分, 则按 分页按钮个数 截取 --注意截取的下标--
      arr = pagesArr.slice(page - halfBtnCount, page + halfBtnCount - 1)
    }
    return arr
  }

  // 在可能的情况下，让page处于正中间
  // f(100, 10, 1, 5) // ==> [1, 2, 3, 4, 5]
  // f(100, 10, 7, 5) // ==> [5, 6, 7, 8, 9]
  // f(100, 10, 2, 5) // ==> [1, 2, 3, 4, 5]
  // f(100, 10, 5, 5) // ==> [3, 4, 5, 6, 7]