JS原生分页按钮居中显示

基本要求

// 创建分页组件需要的 按钮数组
// btnCount: 最多能看到几个按钮
// total: 总条数
// size: 每页几条
// page: 当前第几页
function f(total, size, page，btnCount=5) {
  // show me your code
  const arr = [] // 能看到的页码集合
  
  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]

效果实现

// total总条数
// size每页第几条
// page当前第几页
// btnCount 当前第几页
// 要得到的效果    [1,2,3,4,5]

function f(total, size, page, btnCount = 5) {
  // 创建一个数组
  let newArr = []
  console.log(total, size, page)
  // 总条数/第几条 = 有几页   限制用户输入的值只能在规定范围之内
  if (page > total / size) {
    return `请输规范的参数page:${page},最大页数为${total / size}`
  }
  // 如果他输入的值 刚好等于最大页数无法居中怎么办？
  if (page + 1 >= total / size || page + Math.floor(btnCount / 2) > size) {
    // console.log(123)
    let newpage = total / size - btnCount
    for (let i = 0; i < btnCount; i++) {
      newpage++
      newArr.push(newpage)
    }
    return newArr
  }
  //如果他输入的值 刚好等于最小页数无法居中怎么办？照常从头输出
  else if (page - 1 <= 1 || page - Math.floor(btnCount / 2) < 1) {
    for (let i = 0; i < btnCount; i++) {
      newArr.push(i + 1)
    }
    return newArr
  }
  // 执行到最后一步他就可以照常按照逻辑开始编辑了
  // 因为在之前已经把异常操作已经拦截
  // 页码他必须是一个奇数
  if (btnCount % 2 == 1) {
    // 向下取整

    let b = page - Math.floor(btnCount / 2)
    for (let i = 0; i < btnCount; i++) {
      newArr.push(b++)
    }
    return newArr
  } else {
    return 'btnCount请输入奇数'
  }
}


let a = f(100, 10, 5, 7)
console.log(a)

---

改良版

function f(total, size, page, btnCount = 5) {
  // 创建一个数组
  let newArr = []
  let TotalPages = total / size // 总页数
  let deviant = Math.floor(btnCount / 2) //左右要展示几条数据

  console.log(total, size, page)

  // 总条数/第几条 = 有几页   限制用户输入的值只能在规定范围之内
  if (page > TotalPages) {
    return `请输规范的参数page:${page},最大页数为${total / size}`
  }


    // 页码他必须是一个奇数
  if (btnCount % 2 == 1) {
    // 向下取整

    let b = page - deviant
    for (let i = 0; i < btnCount; i++) {
      newArr.push(b++)
    }
    return newArr
  } else {
    return 'btnCount请输入奇数'
  }


  // 如果他输入的值 刚好等于最大页数无法居中怎么办？
  if (page + 1 >= TotalPages || page + deviant > size) {
    // console.log(123)
    let newpage = TotalPages - btnCount
    for (let i = 0; i < btnCount; i++) {
      newpage++
      newArr.push(newpage)
    }
    return newArr
  }
  //如果他输入的值 刚好等于最小页数无法居中怎么办？照常从头输出
  else if (page - 1 <= 1 || page - deviant < 1) {
    for (let i = 0; i < btnCount; i++) {
      newArr.push(i + 1)
    }
    return newArr
  }
}
let a = f(100, 10, 6, 5)
console.log(a)