前端如何实现分页？_前端分页功能怎么实现

作者：我家自动化 | 2024-02-16 22:48:43

踩

前端分页功能怎么实现

先定义分页中需要用的三个值：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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/97445