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

JavaScript实现列表分页（小白版）

news 2025/9/18 8:52:43

组件用惯了，突然叫你用纯css+JavaScript写一个分页，顿时就慌了。久久没有接触js了，不知道咋写了。本文章也是借与参考做的一个demo案例，小白看了都会的那种。咱们就以ul列表为例进行分页：

首先模拟的数据列表是这样的，默认有8条数据：

<div class="example"><ul id="list"><li>这是list1</li><li>这是list2</li><li>这是list3</li><li>这是list4</li><li>这是list5</li><li>这是list6</li><li>这是list7</li><li>这是list8</li></ul><ul id="page"></ul>
</div>

在这里插入图片描述
第一步：修改一下样式（一条li标签假如有40px的高度，现在有8个则整个ul有320px；我现在需要进行一个页面显示5条数据；我们就给ul标签调整一下样式）

#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}

固定高度将5条数据显示出来（200px），溢出的li将进行隐藏,就会显示这样：
在这里插入图片描述
第二步.使用js操作将页面的标签进行获取进行后面的处理

    var pageList = document.getElementById("list");var pageLi = pageList.getElementsByTagName("li");var pageBtn = document.getElementById("page");

定义分页并计算页面数量：
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。

    var n = 0;//定义分页if (pageLi.length % 5 == 0) {//计算页数n = Math.floor(pageLi.length / 5);//向下取整 1.6 => 1} else {n = Math.ceil(pageLi.length / 5);//向上取整 1.6=>2 }

第三步：页面数量得到了就要创建分页标签，因为html只有一个ul标签我们要将li进行动态生成

    for (var i = 1; i <= n; i++) {pageli2= document.createElement("li");  //创建li元素pageli2.style.cssText = "width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white";//元素样式pageli2.innerHTML = i; //页面数显示在li标签里pageBtn.appendChild(cLi); //将li加入到ul下}

然后获取分页li进行样式设置

    var aLi = pageBtn.getElementsByTagName("li"); for (var i = 0; i <= n - 1; i++) {aLi[i].index = i; //下标aLi[0].style.background = "pink"; //样式aLi[i].style.left = i * 40 + "px"; //偏移 位置

此时就会出现分页：
在这里插入图片描述
第四步：对分页两个li做点击事件进行分页显示

        aLi[i].onclick = function() {pageIndex = this.index; //获取下标for (var j = 0; j < aLi.length; j++) {aLi[j].style.background = "pink";  //未选中样式}this.style.background = "blue"; //选中样式//3.页面切换for (var j = 0; j < pageLi.length; j++) {pageLi[j].style.display = "none"; //点击第pageIndex页时，让所有页面隐藏}for (var j = (pageIndex * 5); j < (pageIndex + 1) * 5; j++) {//例如pageIndex为0时，则j=0，j<5;就会将1到5的数据显示出来，以此类推）pageLi[j].style.display = "block";}}

看看最终效果为：
在这里插入图片描述
完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript实现列表分页</title>
<style>
* {margin:0;padding:0;
}
img {border:0;
}
ol,ul,li {list-style:none;
}
.example {width:100%;height:500px;position:relative;
}
#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}
#list li {width:100%;height:40px;line-height: 40px;font-weight: bold;text-align: center;border-bottom:1px solid #666;
}
#page {width:400px;height:30px;margin:0 auto;border:1px solid #ccc;padding:5px 0;position:relative;overflow:hidden;
}
</style>
</head>
<body>
<div class="example"><ul id="list"><li>这是list1</li><li>这是list2</li><li>这是list3</li><li>这是list4</li><li>这是list5</li><li>这是list6</li><li>这是list7</li><li>这是list8</li></ul><ul id="page"></ul>
</div><script>
window.onload = function() {var pageList = document.getElementById("list");var pageLi = pageList.getElementsByTagName("li");var pageBtn = document.getElementById("page");var n = 0;//定义分页if (pageLi.length % 5 == 0) {//计算页数n = Math.floor(pageLi.length / 5);//向下取整 1.6 => 1} else {n = Math.ceil(pageLi.length / 5);//向上取整 1.6=>2 }//添加页码for (var i = 1; i <= n; i++) {pageli2 = document.createElement("li");pageli2.style.cssText = "width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white";pageli2.innerHTML = i;pageBtn.appendChild(pageli2);}var aLi = pageBtn.getElementsByTagName("li");for (var i = 0; i <= n - 1; i++) {aLi[i].index = i;aLi[0].style.background = "pink";aLi[i].style.left = i * 40 + "px";// alert(aLi[i].index)aLi[i].onclick = function() {pageIndex = this.index;for (var j = 0; j < aLi.length; j++) {aLi[j].style.background = "pink";}this.style.background = "blue";//3.页面切换for (var j = 0; j < pageLi.length; j++) {pageLi[j].style.display = "none";}for (var j = (pageIndex * 5); j < (pageIndex + 1) * 5; j++) {pageLi[j].style.display = "block";}}}
}
</script>
</body>
</html>

本教程参与于：JS+CSS实现分页的两个方法

JavaScript实现列表分页（小白版）

组件用惯了，突然叫你用纯cssJavaScript写一个分页，顿时就慌了。久久没有接触js了，不知道咋写了。本文章也是借与参考做的一个demo案例，小白看了都会的那种。咱们就以ul列表为例进行分页： 首先模拟的数据列表是这样的&a…...

编程日记 2023/4/13 18:38:25

Python调用GPT3.5接口的最新方法

GPT3.5接口调用方法主要包括openai安装、api_requestor.py替换、接口调用、示例程序说明四个部分。 1 openai安装 Python openai库可直接通过pip install openai安装。如果已经安装openai，但是后续提示找不到ChatCompletion，那么请使用命令“pip instal…...

编程日记 2023/4/13 18:39:35

Java开发 - 拦截器初体验

目录前言拦截器什么是拦截器拦截器和过滤器 Spring MVC的拦截器 Mybatis的拦截器...

编程日记 2023/4/13 3:22:14

【数据仓库-7】-- 使用维度建模的一些缘由

维度建模是一种用于设计数据仓库和商业智能系统的方法。以下是选择维度建模的两类理由。 1.传统方法，有背书且可靠易于理解和使用：维度建模使用直观的图形和术语，使得非技术人员也能够理解和使用数据仓库和商业智能系统。快速开发和部署：维度建模是一种迭代开发方法，能…...

编程日记 2023/4/19 5:53:20

【开发实践】在线考试系统（一）生成错题知识点的思维导图

一、需求分析设计笔者开发了一个在线考试系统，导师提出一个需求：添加对考试错题相关知识点的总结。在question表中关联知识点的编号，题目可能关联多个知识点。这里笔者的设计是，只关联一个知识点，便于维护。下面是知…...

编程日记 2023/3/27 22:12:34

Java Web 实战 17 - 计算机网络之传输层协议(2)

大家好 , 这篇文章继续给大家讲解 TCP 协议当中的一些操作 , 比如 : 滑动窗口、流量控制、拥塞控制、延时应答、捎带应答、面向字节流这几个提升 TCP 效率的操作 . 我们还会给大家分析 TCP 连接出现异常的时候 , 该如何处理 . 最后会将 TCP 和 UDP 进行比较上一篇文章的链接也…...

编程日记 2023/4/19 5:54:43

MyBatis＜3＞：动态SQL的使用＜if＞＜trim＞＜where＞＜set＞＜foreach＞

动态SQL是MyBatis的强大特性之一，能够完成不同条件下不同的sql拼接。参考官方文档：https://mybatis.org/mybatis-3/zh/dynamic-sql.html<if>标签看这个场景，有必填字段和非必填字段 ，当字段不确定是否传入的时候&#xff…...

编程日记 2023/4/12 14:52:21

【超好懂的比赛题解】暨南大学2023东软教育杯ACM校赛个人题解

title : 暨南大学2023东软教育杯ACM校赛题解 tags : ACM,练习记录 date : 2023-3-26 author : Linno 文章目录暨南大学2023东软教育杯ACM校赛题解A-小王的魔法B-苏神的遗憾C-神父的碟D-基站建设E-小王的数字F-Uziの真身G-电子围棋H-二分大法I-丁真的小马朋友们J-单车运营K-超…...

编程日记 2023/3/27 21:57:28

go-zero学习及使用中遇到的问题

go-zero学习及使用中遇到的问题1 go-zero入门--单体服务demo1.1 单体服务【官方示例】1.1.1 创建greet服务1.1.2 目录结构1.1.3 编写逻辑1.1.4 启动并访问服务1.2 修改GET入参1.2.1 去除options限制的入参值1.2.2 重启并访问服务1.3 添加post请求【新增方法】1.3.1 修改 greet/…...

编程日记 2023/4/19 5:56:03

CCF-CSP认证 202303 500分题解

202303-1 田地丈量（矩阵面积交） 矩阵面积交x轴线段交长度*y轴线段交长度线段交长度，相交的时候是min右端点-max左端点，不相交的时候是0 #include<bits/stdc.h> using namespace std; int n,a,b,ans,x,y,x2,y2; int f(in…...

编程日记 2023/4/13 18:41:19

板内盘中孔设计狂飙，细密间距线路中招

一博高速先生成员：王辉东大风起兮云飞扬，投板兮人心舒畅。赵理工打了哈欠，伸了个懒腰，看了看窗外，对林如烟说道：“春天虽美，但是容易让人沉醉。如烟，快女神节了，要不今晚…...

编程日记 2023/4/19 5:57:35

面试热点题：回溯算法递增子序列与全排列 II

前言： 如果你一点也不了解什么叫做回溯算法，那么推荐你看看这一篇回溯入门，让你快速了解回溯算法的基本原理及框架递增子序列给你一个整数数组 nums ，找出并返回所有该数组中不同的递增子序列，递增子序列中至少有两…...

编程日记 2023/3/27 21:37:21

怎么找回回收站删除的文件

我们都知道，电脑文件都是放在桌面上的，单独存放或者一起存放在文件夹里。但总会有已用完或者是没用的文件，这让我们不得不对其进行清理。而清空回收站也是不可避免的。如果出现了清空文件中还有我们需要的文件，怎么找回回收站删除…...

编程日记 2023/4/19 5:58:51

dp-打家劫舍

你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。给定一个代表每个房屋存放金额的非…...

编程日记 2023/4/12 14:53:51

C++预处理连接

目录定义常量字符串前缀定义枚举类型Boost C库中常常使用预处理连接来定义宏和模板类Google开源的C单元测试框架gtest，使用预处理连接技术创建测试用例和测试方法C预处理连接（Preprocessor Concatenation）是一种宏定义技巧，用于将…...

编程日记 2023/4/19 6:00:16

3、DRF实战总结：基于类的视图APIView, GenericAPIView和GenericViewSet视图集（附源码）

前面介绍了什么是符合RESTful规范的API接口，以及使用了基于函数的视图(FBV)编写了对文章进行增删查改的API。在本篇文章将使用基于类的视图(Class-based View, CBV)重写之前的接口。参考： 1、Django开发总结：Django MVT与MVC设计模式&…...

编程日记 2023/4/13 18:43:37

AutoSAR PduR -AutoSAR PDU常用的使用方式【发送，接收，网关】

总目录链接==>> AutoSAR入门和实战系列总目录 @学前问答： AutoSAR PDU在哪里全局定义的？ AutoSAR PDU涉及到哪些模块？ AutoSAR PDU网关怎么使用？文章目录 1 AutoSAR PDU发送2 AutoSAR PDU接收3 AutoSAR PDU网关转发4 答疑解析AutoSAR PDU 怎么样通过PduR 实现与其…...

编程日记 2023/4/14 9:20:16

瑟瑟发抖吧～OpenAI刚刚推出王炸——引入ChatGPT插件，开启AI新生态

5分钟学会使用ChatGPT 插件（ChatGPT plugins）——ChatGPT生态建设的开端ChatGPT插件是什么OpenAI最新官方blog资料表示，已经在ChatGPT中实现了对插件的初步支持。插件是专门为以安全为核心原则的语言模型设计的工具，可帮助ChatGPT…...

编程日记 2023/4/24 8:25:35

脉诊（切脉、诊脉、按脉、持脉）之法——入门篇

认识脉诊何谓脉诊？脉诊的渊源脉诊重要吗？脉诊确有其事，还是故弄玄虚？中医科学吗？如何脉诊？寸口脉诊法何谓脉诊？ 所谓脉诊，就是通过把脉来诊断身体健康状况的一种必要手段。 …...

编程日记 2023/4/15 19:01:53

【十二天学java】day09常用api介绍

1.API 1.1API概述什么是API API (Application Programming Interface) ：应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类，这些类将底层的实现封装了起来，我们不需要关心这些类是如何实现的，只需要学习这…...

编程日记 2023/4/15 19:03:42

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...

编程新知 2025/9/9 14:50:29

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/8/28 23:59:45

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

2021-03-15 iview一些问题

1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...

编程新知 2025/9/3 8:33:23

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/9/4 2:37:46

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...

编程新知 2025/9/6 0:31:52

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录腾讯[实习]科恩实验室-安全工程师一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制二…...

编程新知 2025/9/17 23:45:35

相关文章：