前端如何实现分页?

2022-11-17 0 20

先定义分页中需要用的三个值: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>

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论