想加深JS功力的伙伴们,都逃不过分页按钮这个环节.
今天就用纯JS代码展示一下分页怎么写,希望能帮助到每个有志于编程学习的朋友.
上图是分页实例的大致效果图.
(2019年最详版代码加注释,非封装代码,破解你的所有疑问,我想再没有这么详细的注释了吧?)
再吐槽一句:N多for循环!想躲页躲不过!
重要定律:
每页数据下标最大值 = (页码值 - 1) * 每页数据条数
攻克目标:
1.动态生成页码:设置一个数组,根据数据多少计算生成相应的页码
2.实现点击下方分页页码,动态战术数据,即表格内容随页码改变而改变 (可以事先写成静态尝试一下)
3.实现前后上一页,下一页的翻页功能(页码样式跟着改变)
代码部分:
HTML:
<body>
<div class="mainContent"> 表格部分
<table></table>
</div>
<div class="seletButton">
<button>上一页</button> 分页条部分
<div class="pagination"></div>
<button>下一页</button>
</div>
</body>
CSS:
<style>
.mainContent{
width: 100%;
height: 250px;
}
table{
margin: 50px auto ;
width: 300px;
border: 1px solid #000;
}
tr{
width: 100%;
height:50px;
line-height: 50px;
margin-top:20px;
text-align: center;
}