原生js实现分页

在原生 JavaScript 中实现分页，主要涉及到以下几个基础概念：

基础概念：

数据集合：要分页展示的数据数组。
每页显示数量：指定每个页面上显示的数据条数。
当前页码：表示用户当前查看的页面编号。

优势：

提升用户体验，避免一次性加载大量数据导致页面卡顿。
更好地控制数据的展示和管理。

类型：常见的有基于数组索引的分页和基于数据库查询的分页（在后端实现），这里说的是前端基于数组索引的分页。

应用场景：适用于数据量不是特别巨大，且在前端进行处理和展示的情况，比如一个简单的列表展示。

以下是一个原生 JavaScript 实现分页的示例代码：

<!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>
    .page-item {
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin-right: 5px;
      cursor: pointer;
    }

    .page-item.active {
      background-color: #007bff;
      color: white;
    }
  </style>
</head>

<body>
  <ul id="dataList"></ul>
  <div id="pagination"></div>

  <script>
    const data = []; // 假设这是要分页的数据数组
    for (let i = 1; i <= 100; i++) {
      data.push(`Item ${i}`);
    }

    const itemsPerPage = 10;
    let currentPage = 1;

    function renderPage(page) {
      const start = (page - 1) * itemsPerPage;
      const end = start + itemsPerPage;
      const pageData = data.slice(start, end);
      const dataList = document.getElementById('dataList');
      dataList.innerHTML = '';
      pageData.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        dataList.appendChild(li);
      });
    }

    function renderPagination() {
      const totalPages = Math.ceil(data.length / itemsPerPage);
      const pagination = document.getElementById('pagination');
      pagination.innerHTML = '';
      for (let i = 1; i <= totalPages; i++) {
        const pageItem = document.createElement('span');
        pageItem.classList.add('page-item');
        pageItem.textContent = i;
        if (i === currentPage) {
          pageItem.classList.add('active');
        }
        pageItem.addEventListener('click', () => {
          currentPage = i;
          renderPage(currentPage);
          renderPagination();
        });
        pagination.appendChild(pageItem);
      }
    }

    renderPage(currentPage);
    renderPagination();
  </script>
</body>

</html>

在上述代码中：

首先创建了一个包含 100 个数据项的数组。
renderPage 函数用于根据当前页码渲染对应的数据到页面上。
renderPagination 函数用于生成并渲染分页按钮。

如果遇到分页数据显示不正确或者分页按钮不更新的问题，可能是以下原因：

计算起始和结束索引的逻辑有误，导致切片的数据范围不对。
更新当前页码后，没有重新调用渲染函数来更新页面显示。

解决方法就是仔细检查相关的计算逻辑和函数调用，确保在页码变化时正确地重新渲染数据和分页按钮。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

原生js实现分页

相关·内容

珠海站丨数产融合·云+助力

腾讯金融云银行业数字原生技术论坛

云函数 Web Function 落地应用实践—大咖分享

Techo TVP开发者峰会-云以致用，智效合一(Day 1)

Techo TVP开发者峰会-云以致用，智效合一（Day 2）

Serverless 一站式云原生应用开发实践

雁栖学堂-湖存储专题直播

ServerlessDays · China Online

腾讯云CDB/CynosDB技术揭秘（上）：云原生、海量运营

腾讯云CDB/CynosDB技术揭秘（下）自主可控、前沿探索

小程序云原生的新探索：云开发数据库

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐