当前位置： 首页 > news >正文

用原生js手写分页功能

news 2026/4/2 23:31:50

分页功能如下：

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

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

// 课外书列表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时，则显示数据所对应的索引为04；第二页，pageNum为2时，为59；第三页，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) returnpageNum++updataData(pageNum)next.disabled = pageNum >= maxPage ? true : false
};

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

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

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

点击上一页同理。

// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {// 如果当前页是第一页，则不做任何操作if (pageNum === 1) returnpageNum--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; // 当前页数，默认为1const 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 : falsenext.disabled = pageNum >= maxPage ? true : false}// 点击上一页prev.onclick = function () {// 如果当前页是第一页，则不做任何操作if (pageNum === 1) returnpageNum--updataData(pageNum)updateBtnStatu(pageNum)};// 点击下一页next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)updateBtnStatu(pageNum)};
</script></html>

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

相关文章：

用原生js手写分页功能

分页功能如下&#xff1a; 数据分页显示&#xff0c;每页显示若干条数据&#xff0c;默认当前页码为第一页。例如&#xff1a;每页5条数据&#xff0c;则第一页显示 1-5 条&#xff0c;第二页显示 6-10 条&#xff0c;依此类推。当页码为第一页时&#xff0c;上一页为禁用状态…...

编程日记 2023/5/23 12:55:42

CornerNet介绍

CornerNet: Detecting Objects as Paired Keypoints ECCV 2018 Paper&#xff1a;https://arxiv.org/pdf/1808.01244v2.pdf Code&#xff1a;GitHub - princeton-vl/CornerNet 摘要&#xff1a; 提出了一种single-stage的目标检测算法CornerNet&#xff0c;它把每个目标检…...

编程日记 2023/5/23 12:55:39

【SpringBoot】日志使用

默认配置 Spring Boot默认帮我们配置好了日志 //记录器Logger logger LoggerFactory.getLogger(getClass());Testpublic void contextLoads() {//System.out.println();//日志的级别&#xff1b;//由低到高 trace<debug<info<warn<error//可以调整输出的日志级…...

编程日记 2023/5/23 12:55:37

关于slice扩容性能损耗的探究

背景 ​ 如果让我评选最伟大的数据结构&#xff0c;在我心中答案只有两个&#xff0c;数组和哈希表&#xff0c;这两个是我的程序的重要组成部分&#xff0c;同时也是我饭碗的重要组成部分。slice和map简洁明了的API很容易让我们有一种他们提供了无限大的空间&#xff0c;可以…...

编程日记 2023/5/23 18:29:39

Java实现单向链表

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;Java数据结构与算法 &#x1f9…...

编程日记 2023/5/23 18:29:36

3月4日,30秒知全网,精选7个热点

///印度最大供电商罕见于现货市场购煤&#xff0c;能源供应短缺成忧 据知情人士透露&#xff0c;这家印度国有发电公司计划在下周左右发布300万吨的招标 ///QQ音乐推出AIGC黑胶播放器 这是国内音乐行业首个运用AI技术&#xff0c;通过文字、图片指令快速生成不同风格的播放器…...

编程日记 2023/5/23 18:29:34

EXCEL-职业版本（2）

Excel-职业版本&#xff08;2&#xff09; 定位 1.如何快速定位到不连续的空值&#xff0c;填充为0 1.在任意空单元格里复制0 2.选中数据区域CtrlA 3.CtrlG 4.选择【定位条件】 5.选择【空值】 6.ctrlV 粘贴 即可 2.怎么一次性计算每个小组的数量 单价和金额的和? 1.选中…...

编程日记 2023/5/23 18:29:32

java中延时队列的实现

大家好&#xff0c;我是一名CRUD工程师&#xff0c;最近我朋友突然来问我如何实现延时队列&#xff0c;我脱口而出就是MQ。不过突然想到公司的项目好像用的是java的一个原生类。于是我就想着趁周末的时间好好的去探究一下各方法实现延时队列的优缺点。 延迟消息 延迟消息就是字…...

编程日记 2023/5/23 18:29:29

基于java的circle buffer的实现

总目录链接==>> AutoSAR入门和实战系列总目录 文章目录 缓冲区示例什么是循环缓冲区？方法 1：使用数组插入元素删除元素方法 2：使用链表插入元素：删除元素：当数据经常从一个地方移动到另一个地方或从一个进程移动到另一个进程或被频繁访问时，它不能存储在永久性内存…...

编程日记 2023/5/23 18:29:27

通用方法——为什么重写equals还要重写hashcode

本文介绍java.lang.Object类中的两个方法&#xff1a;equals和hashCode。这两个方法大家应该都知道&#xff0c;但是这两个方法的作用是什么、为什么重写equals还要重写hashCode、它们之间有什么关系和约定等&#xff0c;今天就来带大家了解一下。 1、hashCode hashCode即散列…...

编程日记 2023/5/23 18:29:24

JavaSE学习进阶day2_01 包和权限修饰符

第一章 包 1.1 包 包在操作系统中其实就是一个文件夹。包是用来分门别类的管理技术&#xff0c;不同的技术类放在不同的包下&#xff0c;方便管理和维护。 在IDEA项目中&#xff0c;建包的操作如下&#xff1a; 这个咱们在基础班就谈到过。 包名的命名规范&#xff1a; 路径…...

编程日记 2023/5/23 18:29:22

Android性能调优 - 省电优化

省电&#xff1a;通过工具Battery Historian查看到:耗电大头: 屏幕、网络、cpuled/oled屏幕显示:降低亮度&#xff0c;开深色模式&#xff1b;锁屏间隔缩短到 &#xff1b;亮屏需要一直持有唤醒锁&#xff0c;还有gps定位也需要用到唤醒锁;网络&#xff1a; 常用的网络优化措施…...

编程日记 2023/5/23 18:29:20

ElasticSearch - SpringBoot整合ES之全文搜索匹配查询 match

文章目录1. 数据准备2. match 匹配查询1. 全文检索2. 简化查询DSL语句3. match 匹配查询原理官方文档地址&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/index.html权威指南&#xff1a;https://www.elastic.co/guide/cn/elasticsearch/guide/current/…...

编程日记 2023/5/23 18:29:17

句子的改写和扩写

目录 1.句子改写 2.句子扩写 &#xff08;不低于15个句子算是长句子&#xff0c;不能太多长句子&#xff09; 1.句子改写 我绝不会嫁给你的。 如果你是世界上最后一个男人&#xff0c;我就去寺庙。 If you married me,I would jump into the well. 如果你嫁给我&#xff0c;我…...

编程日记 2023/5/23 18:29:15

DockerFile创建及案例

DockerFile dockerfile是用来构建docker镜像的文件&#xff0c;命令脚本参数脚本&#xff01; 构建步骤 编写一个dockerfile文件docker build 构建成为一个对象docker run 运行镜像docker push 发布镜像&#xff08;DockerHub、阿里云镜像仓库&#xff09; 去官网Docker-Hub…...

编程日记 2023/5/23 18:29:13

第十四届蓝桥杯三月真题刷题训练——第 1 天

目录 题目1&#xff1a;数列求值 代码&#xff1a; 题目2&#xff1a;质数 代码&#xff1a; 题目3&#xff1a;饮料换购 代码&#xff1a; 题目1&#xff1a;数列求值 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出…...

编程日记 2023/5/23 18:29:10

基于容器云提交spark job任务

容器云提交spark job任务 容器云提交KindJob类型的spark任务&#xff0c;首先需要申请具有Job任务提交权限的rbac&#xff0c;然后编写对应的yaml文件&#xff0c;通过spark内置的spark-submit命令&#xff0c;提交用户程序(jar包)到集群执行。 1、创建任务job提交权限rbac …...

编程日记 2023/5/23 18:29:08

Linux系统调用之目录操作函数

前言 如果&#xff0c;想要深入的学习Linux系统调用中mkdir&#xff0c;rmdir&#xff0c;rename&#xff0c;chdir&#xff0c;getcwd等这些有关于目录操作函数&#xff0c;还是需要去自己阅读Linux系统中的帮助文档。 具体输入命令&#xff1a; man 2 mkdir/rmdir/rename/ch…...

编程日记 2023/5/23 18:29:06

设计模式-策略模式

前言 作为一名合格的前端开发工程师&#xff0c;全面的掌握面向对象的设计思想非常重要&#xff0c;而“设计模式”是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的&#xff0c;代表了面向对象设计思想的最佳实践。正如《HeadFirst设计模式》中说的一句话&…...

编程日记 2023/5/23 18:29:04

面试+算法：罗马数字及Excel列名与数字互相转换

概述 算法是一个程序员的核心竞争力&#xff0c;也是面试最重要的考查环节。 试题 判断一个罗马数字是否有效 罗马数字包含七种字符&#xff1a;I&#xff0c;V&#xff0c;X&#xff0c;L&#xff0c;C&#xff0c;D和M&#xff0c;如下 字符数值I1V5X10L50C100D500M1000…...

编程日记 2023/5/23 18:29:01

Phi-4-Reasoning-Vision基础操作：图片预览、参数调整、结果复制与导出功能

Phi-4-Reasoning-Vision基础操作&#xff1a;图片预览、参数调整、结果复制与导出功能 1. 工具概览 Phi-4-Reasoning-Vision是一款基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具。它专为双卡4090环境优化&#xff0c;通过Streamlit搭建了直观的宽屏交…...

编程新知 2026/4/2 20:42:17

如何利用Postiz实现高效社交媒体管理：AI驱动的智能调度解决方案

如何利用Postiz实现高效社交媒体管理&#xff1a;AI驱动的智能调度解决方案 【免费下载链接】clickvote &#x1f4e8; The ultimate social media scheduling tool, with a bunch of AI &#x1f916; 项目地址: https://gitcode.com/GitHub_Trending/cl/clickvote Pos…...

编程新知 2026/4/2 16:44:29

如何破解Godot游戏的黑盒：解密PCK文件中的资源宝藏

如何破解Godot游戏的黑盒&#xff1a;解密PCK文件中的资源宝藏 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 你是否曾好奇Godot游戏内部隐藏着怎样的资源结构&#xff1f;当面对那些看似神秘的.pc…...

编程新知 2026/4/2 15:20:56

Koodo Reader：您的跨平台电子书阅读解决方案，让阅读无处不在

Koodo Reader&#xff1a;您的跨平台电子书阅读解决方案&#xff0c;让阅读无处不在 【免费下载链接】koodo-reader A modern ebook manager and reader with sync and backup capacities for Windows, macOS, Linux, Android, iOS and Web 项目地址: https://gitcode.com/Gi…...

编程新知 2026/4/2 15:08:42

禅道16.4开源版二次开发实战：手把手教你给测试用例新增“测试方式”字段（附完整代码）

禅道16.4开源版二次开发实战&#xff1a;从零构建测试方式字段全流程指南 当测试团队同时管理手工与自动化用例时&#xff0c;原生禅道系统缺少测试类型标识字段的问题会直接导致统计混乱。上周我接手的一个金融项目就遇到这种情况——自动化测试报告总是混入手工用例数据。经过…...

编程新知 2026/4/2 14:48:24

手把手教你用STM32的ADC读取PT100模块，实现高精度温度采集（附完整代码）

基于STM32的PT100高精度温度采集系统设计与实现 在工业控制和精密测量领域&#xff0c;温度监测的准确性往往直接影响产品质量和生产安全。PT100作为最常用的温度传感器之一&#xff0c;凭借其优异的线性度和稳定性&#xff0c;成为众多工程师的首选。本文将深入探讨如何利用ST…...

编程新知 2026/4/2 14:46:23

AI辅助开发新思路：让快马平台生成风车动漫智能推荐与摘要代码

用AI辅助开发提升动漫网站体验 最近在做一个动漫网站项目&#xff0c;需要实现智能推荐和内容摘要功能。传统开发方式需要自己写复杂的算法&#xff0c;但借助InsCode(快马)平台的AI辅助功能&#xff0c;可以快速生成代码框架&#xff0c;大大提升开发效率。下面分享我的实现思…...

编程新知 2026/4/2 14:32:02

突破安卓HTTPS抓包困境：Xposed+JustTrustMe框架实战指南

1. 为什么HTTPS抓包在安卓上这么难&#xff1f; 最近几年做安全测试的朋友应该深有体会&#xff0c;安卓应用的HTTPS抓包越来越难搞了。我刚开始接触这块时也踩了不少坑&#xff0c;明明在浏览器里能轻松抓到的HTTPS请求&#xff0c;到了APP里就死活抓不到。后来才发现&#xf…...

编程新知 2026/4/2 14:03:33

win-acme证书自动续期架构深度解析：从故障排查到高可用部署

win-acme证书自动续期架构深度解析&#xff1a;从故障排查到高可用部署 【免费下载链接】win-acme Automate SSL/TLS certificates on Windows with ease 项目地址: https://gitcode.com/gh_mirrors/wi/win-acme 技术背景与挑战 在当今云原生和微服务架构盛行的时代&am…...

编程新知 2026/4/2 13:22:30

JD-GUI：3分钟掌握Java反编译的终极免费工具

JD-GUI&#xff1a;3分钟掌握Java反编译的终极免费工具 【免费下载链接】jd-gui A standalone Java Decompiler GUI 项目地址: https://gitcode.com/gh_mirrors/jd/jd-gui 你是否曾经面对一个没有源码的Java程序感到无从下手&#xff1f;或者需要快速理解第三方库的内部…...

编程新知 2026/4/2 13:12:26