页面分页效果
效果说明：
数据库中有一组数据，将其多页展示在页面中
1.点击左按钮，展示当前页的上一页，如果当前展示页为第一页时，左按钮禁用
2.点击右按钮时，当前页的下一页，如果当前页为最后一页时，右按钮禁用
3.选择框可选择一页展示多少个数据，当选择展示数据多少的改变，总页数页会发生改变
html构造
<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="./list.js"></script>
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>
/**案例分析：
* 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. 调用渲染函数
*
*/
js实现
var oUl = document.querySelector('ul');
var total = document.querySelector('.total');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var select = document.querySelector('select');
var kaiShi = 1;
var jieShu = 4;
var yeShu = 0;
function fun(){
var oList = list.slice((kaiShi -1)*jieShu,kaiShi * jieShu);
oUl.innerHTML = oList.reduce(function(prev,item){
return prev += `
<li>
<img src="${item.pic}" >
<p>${item.name}</p>
<p>城市:\u0020${item.city}</p>
<p>地址:\u0020${item.address}</p>
<p>价格:\u0020${item.price}</p>
<p>时间:\u0020${item.showTime}</p>
</li>
`
},'')
yeShu = Math.ceil(list.length / jieShu);
total.innerHTML = `${kaiShi} / ${yeShu}` ;
prev.className = kaiShi == 1 ? "prev disable" : " prev";
next.className = kaiShi == yeShu ? "next disable" : "next";
}
fun();
prev.onclick = function(){
if(kaiShi == 1) return;
kaiShi--;
fun();
}
next.onclick = function(){
if(kaiShi == yeShu) return;
kaiShi++;
fun();
}
select.onclick = function(){
jieShu = select.value;
fun();
}
数据 (list)
var list = [{"id":625153951363,"name":"2020西太湖国际音乐节","showTime":"2020.09.19-09.20","price":"199-399","city":"常州","address":"常州西太湖中国花卉博览景区北门","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"},{"id":624506842658,"name":"2020舟山东海音乐节","showTime":"2020.09.04-09.06","price":"200-680","city":"舟山","address":"舟山市朱家尖南沙景区沙滩","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg"},{"id":623216520608,"name":"中国•磐安 2020氧气山水音乐节","showTime":"2020.08.22 周六 16:30","price":"280","city":"金华","address":"金华磐安花溪风景区","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg"},{"id":624345993344,"name":"2020“一生中最爱”七夕演唱会","showTime":"2020.08.25 周二 19:30","price":"180-580","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg"},{"id":624170605605,"name":"东海五渔节之敢潮音乐节","showTime":"2020.08.22 周六 18:00","price":"198-228","city":"舟山","address":"舟山嵊泗五龙乡听海广场(原黄沙村船厂)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg"},{"id":624000957041,"name":"【聚光灯】周四周日爆笑脱口秀剧场","showTime":"2020.08.13-09.27","price":"99","city":"上海","address":"健力士醇黑坊","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg"},{"id":623838540974,"name":"2020真世界摇滚演出","showTime":"2020.08.29 周六 20:30","price":"120","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg"},{"id":624699066028,"name":"开心麻花首部悬疑惊悚喜剧《醉后赢家》","showTime":"2020.08.25-09.06","price":"80-1080","city":"北京","address":"地质礼堂剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png"},{"id":625219995330,"name":"开心麻花经典爆笑舞台剧《乌龙山伯爵》","showTime":"2020.08.25-08.30","price":"80-1080","city":"北京","address":"北京展览馆剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg"},{"id":623454281510,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.12 周三","price":"80-1280","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg"},{"id":625314963280,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.15-08.21","price":"100-1180","city":"上海","address":"虹桥艺术中心","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg"},{"id":622815888793,"name":"开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》","showTime":"2020.08.12-08.16","price":"80-1180","city":"上海","address":"上戏实验剧院","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg"},{"id":624443634831,"name":"孟京辉戏剧作品《我爱xxx》","showTime":"2020.08.13-08.16","price":"100-380","city":"北京","address":"蜂巢剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg"},{"id":624095704875,"name":"【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月","showTime":"2020.08.12-08.30","price":"360-3460","city":"杭州","address":"杭州新天地太阳剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg"},{"id":624163106935,"name":"高达5公里定向挑战赛","showTime":"2020.09.26 周六","price":"108-388","city":"上海","address":"世纪公园","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg"},{"id":622064265074,"name":"2020 FORMULA1 中国大奖赛（礼包&福袋）","showTime":"2020.07.04-12.31","price":"120-270","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg"},{"id":623662985515,"name":"2020ChinaJoy电竞赛事荟萃","showTime":"2020.07.31-10.30","price":"0","city":"北京","address":"请到大麦APP和优酷APP观看","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg"},{"id":618307700815,"name":"2020 FORMULA1 中国大奖赛（服装）","showTime":"2020.05.19-12.31","price":"248-620","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg"},{"id":613334933912,"name":"2020 FORMULA1 中国大奖赛（周边衍生品）","showTime":"2020.03.11-12.31","price":"35-160","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg"},{"id":613323173822,"name":"2020 FORMULA1 中国大奖赛（帽品）","showTime":"2020.03.11-12.31","price":"200-335","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg"},{"id":613940057617,"name":"加速北京跳伞俱乐部高空跳伞体验","showTime":"2020.08.05-08.31","price":"2980","city":"北京","address":"北京市平谷区马坊镇通航产业基地","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png"},{"id":624453755826,"name":"《你是演奏家2 · 超级金贝鼓》","showTime":"2020.08.21-08.23","price":"180-380","city":"上海","address":"美琪大戏院","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg"},{"id":624211844323,"name":"正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》","showTime":"2020.09.05 周六","price":"180-580","city":"海口","address":"海南省歌舞剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg"},{"id":624672730925,"name":"全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险","showTime":"2020.11.15 周日","price":"80-480","city":"上海","address":"黄浦剧场-中剧场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg"},{"id":624868314578,"name":"大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》","showTime":"2020.09.06 周日","price":"180-380","city":"天津","address":"津湾大剧院大剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png"},{"id":624450522367,"name":"大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.09.06 周日","price":"120-280","city":"南京","address":"江苏大剧院--综艺厅","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png"},{"id":623125350409,"name":"大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.08.27-08.30","price":"80-480","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg"},{"id":623975390263,"name":"正版授权大型实景舞台剧《奥特曼：宇宙之光》（杭州站）","showTime":"2020.12.13 周日","price":"68-480","city":"杭州","address":"杭州剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg"}]
