分页按钮的模拟

以下通过JS代码模拟分页按钮
要实现上图这一操作较为简单,需设置显示按钮数为5个,用数组来展示要展现的页码的值

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

这是在正常输入数据的情况下,并且适用于展示五个按钮,在不是五个按钮的情况下,或者输入错误数据的情况下,例如,当前页数超过了总页数除以每页几条的数字,所以也需要对错误数据进行处理

 function f(total, size, page, btnCount) {
      // show me your code
      let arr = [] // 能看到的页码集合
      var num = parseInt(btnCount / 2)
      var a = page - num
      // var b = page + num
      // 对数组最后一位进行判断

      var b
      if (total % size === 0) {
        b = total / size
      } else {
        b = parseInt(total / size) + 1
      }
      // console.log('++', b)
      // 需要验证page值不能大于total/size的值
      /*    if (page > b || page === 0) {
           alert('数据错误')
         } else */
      if (page !== b && page < b - (parseInt(btnCount / 3))) {

        for (let i = 1; i <= btnCount; i++) {
          if (a <= 1) {
            a = 1
          }
          arr.push(a++)
          // console.log('a1', a)

        }
      } else if (page === b || page >= b - (parseInt(btnCount / 3))) {
        // console.log('a', a)
        // console.log('btn', btnCount)
        for (let j = 1; j <= btnCount; j++) {
          // console.log(1)
          arr.push(b--)
        }
        arr.reverse()
      }
      return arr
    }

    // console.log('res', f(100, 11, 9, 7))
    console.log('res', f(100, 10, 1, 5))
    console.log('res', f(100, 10, 2, 5))
    console.log('res', f(100, 10, 7, 5))
    console.log('res', f(100, 10, 5, 5))
    console.log('res', f(100, 10, 10, 5))
    console.log('res', f(100, 10, 8, 5))
    console.log('res', f(100, 10, 9, 5))
    console.log('res', f(100, 5, 19, 7))
    console.log('res', f(100, 5, 18, 7))
    console.log('res', f(100, 5, 18, 9))
    console.log('res', f(100, 5, 19, 9))
    console.log('res', f(100, 5, 17, 9))

以上也只是处理了错误数据以及在页码就是最后一页的情况下,数组应返回的值,在页码是倒数第二,第三的情况下还需要考虑展示按钮值btnCount,也就是数组长度对要展示数据的影响,简单数据测算起来没有错误,并没有进行边界值的测算,测算数组元素也是默认为奇数个
以上是使用数组的push方法,下面是使用数组的slice方法

 function f(total, size, page, btnCount) {
      var a
      if (total % size === 0) {
        a = total / size
      } else {
        a = parseInt(total / size) + 1
      }
      var b = parseInt(btnCount / 2)
      console.log(b)
      const arr = []
      for (let i = 1; i <= a; i++) {
        arr.push(i)
      }
      console.log(arr.length)
      // var res = arr.slice(page - b, page + b, btnCount)
      if (page - b <= 0) {
        let c = 0
        console.log(arr.slice(c, btnCount, btnCount))
      } else if (page + b >= arr.length) {
        console.log(arr.slice(arr.length - btnCount, arr.length, btnCount))
      } else {
        console.log(arr.slice(page - b - 1, page + b, btnCount))
      }

    }

这样的话更加简便