最近接触老项目,项目要求修改表格添加分页功能,采用的bootstrap-table,在完成项目后,决定原生简单实现一下分页效果。
效果:
首先,分页最重要的几个参数:
- 每页显示条数:pageSize
- 总数据量:data;
- 总共多少页:totalpages= (data-1)/pageSize+1
然后,就是根据总页数生成分页
var str= '';
for (var i = 1; i <= totalpages; i++) {
str+='<li>'+i+'</li>'
}
bBtn.innerHTML=str;
再就是点击页码的事件:
var aLi = bBtn.getElementsByTagName("li");
for (var i = 0; i <= totalpages - 1; i++) {
aLi[i].index = i;
aLi[0].style.background = "#fff000";
aLi[i].style.left = i * 40 + "px";
//点击页码做3件事
aLi[i].onclick = function() {
b = this.index;
// 1.当前页码active(简单功能)
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = "#00ff00";
}
this.style.background = "#fff000";
//2.页面切换
for (var j = 0; j < oLi.length; j++) {//点击第b页,先让 所有页面隐藏
oLi[j].style.display = "none";
}
var a=0;
//判断是否为最后一条数据
b ==(totalpages-1) ? a=oLi.length : a=(b+1)*pageSize;
for (var j = (b * pageSize); j <a; j++) {//每页显示条数:第一条 b * 10条 至 每页最后一条数据()(重难点)
oLi[j].style.display = "block";
}
}
}
然后就是监听onchange事件,进行页码之间的切换,附上代码
<style>
ol,ul,li {
list-style:none;
}
.box {
width:550px;height:500px;position:relative; margin:20px auto;
}
#conten {
width:500px;height:410px; border:1px solid #ccc;overflow:auto; margin: 0 auto;
}
#conten li {
width:100%;height:40px;border-bottom:1px solid #ff0000;text-align: center;
}
#btn {
width:180px;height:30px;margin:20px auto;padding:5px 10px;position:relative;
}
#btn li{
width:30px; height:30px; background:#00ff00; margin:0 5px;display: inline-block;position:absolute; transition:left 0.5s;text-align:center;
}
.pageList{
height: 100px;display: flex;justify-content: space-around;align-items: center;
}
select{
width: 40px;
}
</style>
</head>
<body>
<div class="box">
<ul id="conten">//这是要分页的内容</ul>
<div class="pageList">
<p>共<span class="pageNumber"></span>条记录</p>
<p>每页显示<select>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>>条记录</p>
<ul id="btn"></ul>
</div>
</div>
<script>
window.onload = function() {
var oConten = document.getElementById("conten");
var oLi = oConten.getElementsByTagName("li");
var bBtn = document.getElementById("btn");
var num=document.getElementsByClassName('pageNumber')[0];
var oSelect=document.getElementsByTagName('select')[0];
var pageSize=0;
var str= '';
oSelect.onchange=function(){
pageSize=oSelect.value;
var totalpages = parseInt((oLi.length-1)/pageSize+1)//页面数量()
num.innerHTML=oLi.length;
num.style.color="#00ff00"
//添加页码标签(几个页面就添加几个页码)
for (var i = 1; i <= totalpages; i++) {
str+='<li>'+i+'</li>'
}
bBtn.innerHTML=str;
str='';
var aLi = bBtn.getElementsByTagName("li");
for (var i = 0; i <= totalpages - 1; i++) {
aLi[i].index = i;
aLi[0].style.background = "#fff000";
aLi[i].style.left = i * 40 + "px";
//点击页码做3件事
aLi[i].onclick = function() {
b = this.index;
// 1.当前页码active(简单功能)
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = "#00ff00";
}
this.style.background = "#fff000";
//2.页面切换
for (var j = 0; j < oLi.length; j++) {//点击第b页,先让 所有页面隐藏
oLi[j].style.display = "none";
}
var a=0;
//判断是否为最后一条数据
b ==(totalpages-1) ? a=oLi.length : a=(b+1)*pageSize;
for (var j = (b * pageSize); j <a; j++) {//每页显示条数:第一条 b * 10条 至 每页最后一条数据()(重难点)
oLi[j].style.display = "block";
}
}
}
aLi[0].onclick(); //切换每页显示条数时默认显示第一个页码
}
oSelect.onchange(); //页面加载时,默认触发一次onchange事件
}
</script>