在自己的ceshi demo中
分页必须有以下元素:
当前页数:thispage,用来控制第几页
总页数:sumpage,用来查询总共要分多少页
页码:showsize,用来控制需要分多少页,就是一页显示多少条的意思
声明属性:
data: {
arr: [],
//当前页
thispage:1,
//总页数
sumpage:0,
//一页显示多少条
showSize:2,
//测试变量
textflied:0
},
一.求总页数sumpage
访问后台后得到一个对象,通过该对象的长度和根据自己的页码需求进行计算总页数
下面是访问后台的一个方法,查询全部数据后,返回一个value.data对象,然后调用求总页数的方法
//获得所有数据
findAll(){
let vm=this;
axios.get("http://192.168.3.11:8080/findAll").then((value) => {
//获取总页数数量
//通过访问后端获取到一个对象,然后调用求总页数方法
vm.sumpage=vm.qiuzongye(value.data.length,this.showSize);
console.log(vm.sumpage);
this.arr = value.data;
for (let i = 0; i < this.arr.length; i++) {
this.arr[i].boll = false;
}
});
},
//总页数计算方法(第1个参数是对象总数量,第2个参数是需要分多少条数据)
qiuzongye(sumdate,showsize){
//如果可以被整除就直接除
if (sumdate%showsize==0){
console.log(showsize);
return sumdate/showsize;
}else {
//如果多出一页则取整+1
return parseInt(sumdate/showsize)+1
}
},
二.测试上一页和下一页是否可以+1或则-1
声明标签:
<div>
<span @click="shouye()">首页</span>
<span @click="shangyiye()">上一页</span>
<span @click="xiayiye()">下一页</span>
<span @click="weiye()">尾页</span>
<span>当前页:{{thispage}}</span>
<span>总页数:{{sumpage}}</span>
</div>
测试上一页下一页的值,然后调用测试变量的方法:
//下一页
//当当前页如果小于总页数的,就可以进行下一页
xiayiye(){
if (this.thispage<this.sumpage){
this.thispage++;
this.updateFlied();
}
},
//上一页
//当当前页如果>1则可以上一页
shangyiye(){
if (this.thispage>1){
this.thispage--;
this.updateFlied();
}
},
//控制测试变量
updateFlied(){
for (let i=0;i<this.thispage;i++){
this.textflied=i*this.showSize;
}
},
//首页就让当前页回到1,并且调用控制变量方法
shouye(){
this.thispage=1;
this.updateFlied();
},
//尾页就让当前页等于总页码即可,并且调用控制变量方法
weiye(){
this.thispage=this.sumpage;
this.updateFlied();
}
控制变量的方法只要是可以让循环的是否,进行v-if判断
v-if是如果存在的意思,判断条件 当对象下标<(控制变量+显示页数)并且 对象下标要大于获得等于控制变量,才会显示相应的数据
<tr v-for="(item,index) in arr" v-if="index<(textflied+showSize)&&index>=textflied">