js-分页简单实现_js实现简单的分页-CSDN博客

本文链接：https://blog.csdn.net/weixin_45184807/article/details/118310296

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  // total 总数
  // size  条数
  // page  页码
  // butCount 数组长度
  function fn(total,size,page,btnCount){
  let arr = new Array(btnCount).fill(1) // 初始化一个数组
  const sum = Math.ceil(total / size) // 总页数
  const zj = Math.ceil(btnCount / 2 ) // 临界值
  // console.log(sum)
  // 分三种情况
  // 1. page < 3
  // 2. page > 3
  // 3. page > sum - 2
  if(page <= zj){ // 小于临界值
    let x = 0
    arr = arr.map(item =>{
      console.log(x)
      x++
      return item = x
    })
  }else if(page > (sum - zj ) ){ // 大于临界值
   let x = sum + 1
    arr = arr.map(item =>{
      console.log(x)
      x--
      return item = x
    }).reverse()
  }else if(page > zj && page <= (sum - zj + 1 )){
    let x = page - zj
    arr = arr.map(item =>{
      console.log(x)
      x++
      return item = x
    })
  }
  return arr
  }
  const arr = fn(100 , 10 , 3, 3)
  console.log(arr)
  document.querySelector("#app").innerHTML = JSON.stringify(arr)
  console.log(document.querySelector("#app"))
</script>
</html>