思路
通过总数据的条数/每一页显示的条数,并向上取整,就可以得到页码数,并动态添加到ul中。
动态创建页码
//每一页显示的信息数
this.num=2;
//当前页面的索引
this.index=0;
//找到容器ul
this.oul=document.querySelector(".pagination");
//动态生成页码
createPage(){
//用来计算创建的最大页码数
this.maxNum=Math.ceil(this.res.length/this.num);
//console.log(this.maxNum);
// 上一页按钮
var str1=` <li class="page-item">
<a href="javascript:;" class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>`;
//通过循环动态生成页码
for(var i=0;i<this.maxNum;i++){
//为li添加页码数字
str1 += `<li class="page-item"><a class="page-link" href="javascript:;">${i+1}</a></li>`;
}
this.oul.innerHTML=str1;
//下一页按钮
this.oul.innerHTML=str1+` <li class="page-item">
<a href="javascript:;" aria-label="Next" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>`;
//遍历所有的li,将他们的默认样式去除
for(var j=1;j<this.oul.children.length-1;j++){
this.oul.children[j].className="page-item";
}
//默认给第二个li添加默认选中的样式(也就是第一个有数字的li)
this.oul.children[this.index+1].className="page-item active";
this.display();
}
切换功能
通过点击页码按钮或者上一页和下一页按钮,可以实现数据的切换
clickEvent(){
var that=this;
//为第二个到倒数第二个的li添加点击事件,实现对应数据的切换
$(".pagination li:lt("+(this.maxNum+1)+"):gt(0)").click(function () {
//console.log(33)
that.index=$(this).index()-1;
//console.log(that.index)
$(this).addClass("page-item active").siblings().removeClass("page-item active");
that.display();
});
//上一页按钮的切换功能
$(".pagination li").eq(0).click(function () {
//console.log(444);
//console.log(that.index)
if(that.index==0){
//如果到达第一页,当上一页按钮禁用
$(this).addClass("page-item disabled");
}else{
that.index--;
$(".pagination li").eq(that.index+1).addClass("page-item active").siblings().removeClass("page-item active");
}
that.display();
});
//下一页按钮的切换功能
$(".pagination").children("li:last-child").click(function () {
//console.log(that.index)
if(that.index==that.maxNum-1){
//如果到达最后一页,将下一页按钮禁用
$(this).addClass("page-item disabled");
}else{
that.index++;
$(".pagination li").eq(that.index+1).addClass("page-item active").siblings().removeClass("page-item active");
//console.log(that.index)
}
that.display();
})
}
分页效果的核心
display(){
var str="";
for(var i=this.num * (this.index);i<this.num * (this.index+1);i++){
if(i<this.res.length){
str+=`<tr class="text-center">
<td>${this.res[i].Id}</td>
<td>${this.res[i].name}</td>
<td>${this.res[i].sex}</td>
<td>${this.res[i].age}</td>
<td>${this.res[i].chinese}</td>
<td>${this.res[i].math}</td>
<td>${this.res[i].English}</td>
<td>
<!--给删除按钮添加一个自定义的属性index,用来记录点击的删除按钮的这条记录的id-->
<button class="btn btn-danger" del="delete" index="${this.res[i].Id}">删除</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" hf="update" index="${this.res[i].Id}">修改</button>
</td>
</tr>`;
}
}
this.tbody.innerHTML=str;
}
}