前端如何实现分页？

发布时间：2024-11-05 18:01

先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
分页的思路：把所有的数据请求回来后，通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；假设当前页是currentPage = 1，pageSize = 5，那么应该从(currentPage-1)*pageSize开始截取，到currentPage*pageSize结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；

<!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>
  <style>
    ul {
      list-style: none;
      margin-top: 100px;
    }

    .list {
      width: 200px;
      background-color: aqua;
      margin-top: 10px;
      text-align: center;
      margin: 10px auto 0px;
    }

    .pageBtn {
      text-align: center;
    }
  </style>
</head>

<body>
  <ul id="tabel">

  </ul>
  <div class="pageBtn">
    <span>请点击页码：</span>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
</body>
<script>
  // 假设这就是后台返回的数据
  const tabelList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
  // 当前页码
  const currentPage = 1
  // 页面尺寸
  const pageSize = 5
  // 截取到相应的页码数据
  let pageList = []

  const ul = document.getElementById('tabel')
  function List(pageData) {
    ul.innerHTML = ""
    // ul绑定数据
    for (let i = 0; i < pageData.length; i++) {
      const li = document.createElement("li")
      li.classList.add("list")
      li.innerText = pageData[i]
      ul.appendChild(li)
    }
  }

  // 刚开始显示的是第一页，所以先截取第一页的数据
  pageList = tabelList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
  List(pageList)

  // 给按钮注册点击事件
  const btn = document.getElementsByClassName("pageBtn")
  const li = document.querySelector("li")
  btn[0].onclick = function (e) {
    let newpageList = []
    newCurrentPage = Number(e.target.innerText)
    newpageList = tabelList.slice((newCurrentPage - 1) * pageSize, newCurrentPage * pageSize)
    List(newpageList)
  }
</script>

</html>

前端如何实现分页？

相关推荐