该博客详细介绍了如何实现网页分页效果，包括首次加载时每页显示4条数据，点击下一页和上一页按钮进行翻页，以及调整每页展示数据的数量。文章通过HTML、CSS和JavaScript代码展示了分页逻辑，包括页码信息更新、按钮状态控制等关键步骤，并提供了完整的代码示例。
🏡 分页效果展示：
🏡 首先是默认界面，默认首次进入页面的时候，每页展示4条数据，默认展示第一页，并把向前翻页按钮禁止掉
🏡 点击下一页按钮，可以进行翻页效果，当前页不是第一页或者最后一页时，前后翻页按钮都是可用状态
🏡 点击展示数据的按钮 可以渲染不同数量的数据在页面中
基本思路：
分页效果
1. 首次打开页面
1. 从数组内截取部分数据展示
2. 调整页码信息
1. 调整为 当前页 / 总页码
3. 处理按钮
1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名disable)
2. 点击下一页
0. 当前页++
1. 从数组内截取部分数据展示
2. 调整页码信息
调整为 当前页 / 总页码
3. 处理按钮
1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
3. 点击上一页
0. 当前页--
1. 从数组内截取部分数据展示
2. 调整页码信息
调整为 当前页 / 总页码
3. 处理按钮
1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
4. 改变每页展示数据
0. 修改每页展示数据
1. 从数组内截取部分数据展示
2. 调整页码信息
调整为 当前页 / 总页码
3. 处理按钮
1 . 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable）
逻辑:
0. 准备一个渲染函数
1. 从数组内截取部分数据展示
2. 调整页码信息
* 3. 处理按钮
* 1. 首次打开页面 直接调用
* 2. 点击下一页
* 1. 当前页++
* 2. 调用渲染函数
* 3. 点击上一页
* 1. 当前页--
* 2. 调用渲染函数
* 4. 改变每页展示数据
* 1. 改每页展示数据
* 2. 调用渲染函数
🏡 HTML及CSS部分代码：
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
height: 120px;
color: #fff;
}
.footer {
height: 300px;
}
ul,
li {
list-style: none;
}
ul {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
padding-top: 10px;
}
li {
width: 290px;
border: 1px solid #333;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
li>img {
width: 278px;
display: block;
}
.pagination {
width: 1200px;
margin: 10px auto;
height: 50px;
display: flex;
align-items: center;
}
.pagination>.prev,
.pagination>.next {
width: 50px;
height: 30px;
cursor: pointer;
background-color: orange;
font-size: 24px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.pagination>.disable {
cursor: not-allowed;
background-color: #ccc;
}
.pagination>.total {
font-size: 30px;
font-weight: 700;
margin: 0 20px;
}
.pagination>select {
font-size: 22px;
padding-left: 20px;
margin-left: 30px;
}
</style>
<div class="header">顶部导航</div>
<div class="pagination">
<span class="prev disable"><</span>
<span class="total">1 / 100</span>
<span class="next">></span>
<select>
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
</select>
</div>
<ul>
</ul>
<div class="footer">底部导航</div>
<script src="./dm_list.js"></script> //引入外部JS文件🏡 JavaScript部分代码：
<script>
/**
* 分页效果
*
* 1. 首次打开页面
* 1. 从数组内截取部分数据展示
* 2. 调整页码信息
* 调整为 当前页 / 总页码
* 3. 处理按钮
* 1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
* 2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
*
* 2. 点击下一页
* 0. 当前页++
* 1. 从数组内截取部分数据展示
* 2. 调整页码信息
* 调整为 当前页 / 总页码
* 3. 处理按钮
* 1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
* 2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
*
* 3. 点击上一页
* 0. 当前页--
* 1. 从数组内截取部分数据展示
* 2. 调整页码信息
* 调整为 当前页 / 总页码
* 3. 处理按钮
* 1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
* 2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
*
* 4. 改变每页展示数据
* 0. 修改每页展示数据
* 1. 从数组内截取部分数据展示
* 2. 调整页码信息
* 调整为 当前页 / 总页码
* 3. 处理按钮
* 1. 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
* 2. 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
*
*
* 逻辑:
* 0. 准备一个渲染函数
* 1. 从数组内截取部分数据展示
* 2. 调整页码信息
* 3. 处理按钮
* 1. 首次打开页面 直接调用
* 2. 点击下一页
* 1. 当前页++
* 2. 调用渲染函数
* 3. 点击上一页
* 1. 当前页--
* 2. 调用渲染函数
* 4. 改变每页展示数据
* 1. 改每页展示数据
* 2. 调用渲染函数
*
*/
// 0. 获取元素
var oUl = document.querySelector('ul') // ul标签
var myTotal = document.querySelector('.total') // 页码标签
var myPrev = document.querySelector('.prev') // 上一页按钮
var myNext = document.querySelector('.next') // 下一页按钮
var mySelect = document.querySelector('select') // 选择框
// 0. 准备变量
var currentNum = 1 // 默认当前页 为 第 1 页
var pageSize = 4 // 默认打开时 每页展示 4 条数据
var totalNum = 0 // 记录一下总页码
// 1. 准备渲染函数
function myFn() {
/**
* 1.1 从数组内截取部分数据展示
*
* 从哪里截取到哪?
*
* 假设当前每页展示 4 条数据
* 第 1 页 展示 4 条 ---> [0]~[3]
* 第 2 页 展示 4 条 ---> [4]~[7]
* 第 3 页 展示 4 条 ---> [8]~[11]
*
* 假设当前每页展示 8 条数据
* 第 1 页 展示 8 条 ---> [0]~[7]
* 第 2 页 展示 8 条 ---> [8]~[15]
*
* 假设当前页为 currentNum 每页展示 pageSize 条 数据
* 开始下标: (currentNum - 1) * pageSize
* 结束下标: currentNum * pageSize - 1
*
* 使用 数组.slice(开始下标, 结束下标)
* ---> 数组.slice((currentNum - 1) * pageSize, currentNum * pageSize - 1 + 1)
* ---> 数组.slice((currentNum - 1) * pageSize, currentNum * pageSize)
*/
var newList = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)
oUl.innerHTML = newList.reduce(function (prev, item) {
return prev + `<li>
<img src="${item.pic}" alt="">
<p>${item.name}</p>
<p>城市: ${item.city}</p>
<p>地址: ${item.address}</p>
<p>价格: ${item.price}</p>
<p>时间: ${item.showTime}</p>
</li>`
}, '')
// 2. 调整页码信息
// 2.1 计算总页码
totalNum = Math.ceil(list.length / pageSize)
// 2.2 渲染到页面
myTotal.innerHTML = `${currentNum} / ${totalNum}`
// 3. 处理按钮
// 3.1 如果当前在 第一页 禁用上一页按钮 (添加类名 disable)
// 3.1.1 基础版
// if (currentNum == 1) {
// myPrev.className = 'prev disable'
// } else {
// myPrev.className = 'prev'
// }
// 3.1.2 优化1
// currentNum == 1 ? myPrev.className = 'prev disable' : myPrev.className = 'prev'
// 3.1.3 优化2
myPrev.className = currentNum == 1 ? 'prev disable' : 'prev'
// 3.2 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
myNext.className = currentNum == totalNum ? 'next disable' : 'next'
}
// 2. 首次打开页面 调用
myFn()
// 3. 点击下一页按钮
myNext.onclick = function () {
// 3.0 边界判断
if (currentNum == totalNum) return
// 3.1 当前页++
currentNum++
// 3.2 重新调用渲染函数
myFn()
}
// 4. 点击上一页按钮
myPrev.onclick = function () {
// 4.0 边界判断
if (currentNum === 1) return
// 4.1 当前页--
currentNum--
// 4.2 重新调用渲染函数
myFn()
}
// 5. 改变每页展示数据
mySelect.onchange = function () {
// 5.1 改每页展示数据
pageSize = mySelect.value
// 5.2 调用渲染函数
myFn()
}
</script>
2993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
