用原生js手写分页功能

分页功能如下：

数据分页显示，每页显示若干条数据，默认当前页码为第一页。例如：每页5条数据，则第一页显示 1-5 条，第二页显示 6-10 条，依此类推。
当页码为第一页时，上一页为禁用状态，点击无任何变化。
当页码为最后一页时，下一页为禁用状态，点击无任何变化。
正确显示当前页数和总页数。

首先，要显示的数据如下：

// 课外书列表
  const bookList = [{
      "name": "带你从入门到实战全面掌握 uni-app",
      "price": 8900
    },
    {
      "name": "初中级前端工程师面试宝典",
      "price": 4900
    },
    {
      "name": "微信公众号开发入门",
      "price": 3900
    },
    {
      "name": "从零入门 React 通关指北",
      "price": 8900
    },
    {
      "name": "Flask 框架基础",
      "price": 9800
    },
    {
      "name": "JavaScript 从零构建音乐播放器",
      "price": 8900
    },
    {
      "name": "微信小程序开发入门",
      "price": 1490
    },
    {
      "name": "SpringBoot+Thymeleaf 开发 BBS 论坛",
      "price": 13900
    },
    {
      "name": "Vue.js 3 + Node.js 实现线上聊天室",
      "price": 8800
    },
    {
      "name": "Express.js 实现前后端分离的博客系统",
      "price": 8900
    },
    {
      "name": "经典项目：前后端分离网盘系统实战",
      "price": 8900
    },
    {
      "name": "21 个实验带你快速开发 Django 博客系统",
      "price":1000
    },
    {
      "name": "React Hook 打造精美在线记账本",
      "price": 8900
    },
    {
      "name":'红楼梦',
      "price": 5900
    },
    {
      "name": "Three.js 在网页中创建 3D 动画",
      "price": 6400
    },
    {
      "name": "Web 前端高级开发技术",
      "price": 16900
    }
  ]

html结构如下：

<body>
  <div id="list">
    <ul class="list-group">
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
    </ul>
  </div>
  <div>
    <button disabled="false" id="prev">上一页</button>
    <button id="next">下一页</button>
  </div>
  <p id="pagination">共?页，当前?页</p>
</body>

我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。

let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数

当前显示数据索引受pageNum和limit影响。

如果是第一页，即pageNum为1时，则显示数据所对应的索引为0_{4；第二页，pageNum为2时，为5}9；第三页，pageNum为3时，为10~14。

用变量来表示为：(pageNum-1)limit ~ pageNumlimit

所以，我们书写一个更新页面的函数，并在一开始的时候就调用该函数进行初始化页面。

// 更新页面数据（n当前页数）
function updataData(n) {
  const listGroup = document.querySelector(".list-group")
  const pagination = document.getElementById("pagination")
  // 清空所有数据
  listGroup.innerHTML = ''
  // 循环遍历每一条数据
  for (let i = (n - 1) * limit; i < n * limit; i++) {
    const obj = bookList[i]
    // 如果有值才添加到元素中。
    // 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。
    obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)
  }
  // 更新当前页数和总页数
  pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}

在点击下一页按钮时，需要更新当前页数（pageNum++）和当前页面显示的数据（调用updataData函数），最终还要更新按钮的状态，如果已经到了最后一页，则要将下一页按钮的状态设置为无法选中。

const prev = document.getElementById("prev");
// 点击下一页
next.onclick = function () {
  // 如果当前页是最后一页了，则不做任何操作
  if (pageNum === maxPage) return
  pageNum++
  updataData(pageNum)
  next.disabled = pageNum >= maxPage ? true : false
};

不过这样做有个问题，”上一页”按钮一开始就被设置为disabled，点击下一页，也就是跳转到第2页的时候，此时还是不能点击上一页按钮。

因此，在点击下一页时，还要根据当前页数，改变上一页按钮的状态，我们可以定义一个函数来实现更新按钮状态。

// 更新按钮状态
function updateBtnStatu(pageNum) {
  prev.disabled = pageNum <= 1 ? true : false
  next.disabled = pageNum >= maxPage ? true : false
}
const next = document.getElementById("next");
// 点击下一页
next.onclick = function () {
    // 如果当前页是最后一页了，则不做任何操作
    if (pageNum === maxPage) return
    pageNum++
    updataData(pageNum)
    updateBtnStatu(pageNum)
  };

点击上一页同理。

// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {
  // 如果当前页是第一页，则不做任何操作
  if (pageNum === 1) return
  pageNum--
  updataData(pageNum)
  updateBtnStatu(pageNum)
};

源代码如下：

<!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" />
  <style>
    * {
      
      
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      
      
      text-align: center;
    }

    li {
      
      
      list-style: none;
      margin-bottom: 20px;
    }

    #list {
      
      
      width: 450px;
      height: 300px;
      margin: 30px auto;
      text-align: center;
      padding: 20px;
      border: 3px solid skyblue;
    }
  </style>
</head>

<body>
  <div id="list">
    <ul class="list-group">
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
    </ul>
  </div>
  <div>
    <button disabled="false" id="prev">上一页</button>
    <button id="next">下一页</button>
  </div>
  <p id="pagination">共?页，当前?页</p>
</body>
<script>
  // 课外书列表
  const bookList = [{
      
      
      "name": "带你从入门到实战全面掌握 uni-app",
      "price": 8900
    },
    {
      
      
      "name": "初中级前端工程师面试宝典",
      "price": 4900
    },
    {
      
      
      "name": "微信公众号开发入门",
      "price": 3900
    },
    {
      
      
      "name": "从零入门 React 通关指北",
      "price": 8900
    },
    {
      
      
      "name": "Flask 框架基础",
      "price": 9800
    },
    {
      
      
      "name": "JavaScript 从零构建音乐播放器",
      "price": 8900
    },
    {
      
      
      "name": "微信小程序开发入门",
      "price": 1490
    },
    {
      
      
      "name": "SpringBoot+Thymeleaf 开发 BBS 论坛",
      "price": 13900
    },
    {
      
      
      "name": "Vue.js 3 + Node.js 实现线上聊天室",
      "price": 8800
    },
    {
      
      
      "name": "Express.js 实现前后端分离的博客系统",
      "price": 8900
    },
    {
      
      
      "name": "经典项目：前后端分离网盘系统实战",
      "price": 8900
    },
    {
      
      
      "name": "21 个实验带你快速开发 Django 博客系统",
      "price": 1000
    },
    {
      
      
      "name": "React Hook 打造精美在线记账本",
      "price": 8900
    },
    {
      
      
      "name": '红楼梦',
      "price": 5900
    },
    {
      
      
      "name": "Three.js 在网页中创建 3D 动画",
      "price": 6400
    },
    {
      
      
      "name": "Web 前端高级开发技术",
      "price": 16900
    }
  ]
  let pageNum = 1; // 当前页数，默认为1
  const limit = 5; // 每页显示多少条数据
  const maxPage = Math.ceil(bookList.length / limit); // 最大页数
  const prev = document.getElementById("prev");
  const next = document.getElementById("next");

  // 初始化数据
  updataData(pageNum)

  // 更新页面数据（n当前页数）
  function updataData(n) {
      
      
    const listGroup = document.querySelector(".list-group")
    const pagination = document.getElementById("pagination")
    // 清空所有数据
    listGroup.innerHTML = ''
    // 循环遍历每一条数据
    for (let i = (n - 1) * limit; i < n * limit; i++) {
      
      
      const obj = bookList[i]
      // 如果有值才添加到元素中。
      // 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。
      obj && (listGroup.innerHTML += `<li>书名：《${ 
        obj.name}》，价格为${ 
        obj.price}元</li>`)
    }
    // 更新当前页数和总页数
    pagination.innerHTML = `共${ 
        maxPage}页，当前${ 
        pageNum}页`
  }

  // 更新按钮状态
  function updateBtnStatu(pageNum) {
      
      
    prev.disabled = pageNum <= 1 ? true : false
    next.disabled = pageNum >= maxPage ? true : false
  }

  // 点击上一页
  prev.onclick = function () {
      
      
    // 如果当前页是第一页，则不做任何操作
    if (pageNum === 1) return
    pageNum--
    updataData(pageNum)
    updateBtnStatu(pageNum)
  };

  // 点击下一页
  next.onclick = function () {
      
      
    // 如果当前页是最后一页了，则不做任何操作
    if (pageNum === maxPage) return
    pageNum++
    updataData(pageNum)
    updateBtnStatu(pageNum)
  };
</script>

</html>

最终实现的效果如下：
请添加图片描述

用原生js手写分页功能

猜你喜欢