首先我们写分页需要考虑什么?
插件用的多了,可能自己也就不去考虑这些了。(这次由于自己半路接到一个项目,原先开发没有用到框架。加上页面较多,所 以只能自己用原生去写)
a.为了减少频繁的等测试催你改东西,分页加上后,每页显示的个数,跳转页,首页,尾页的跳转
b.跳转页的页码只能输入数字,大于总页码的时候跳转尾页,为0或者负数时跳转第一页或者不能跳转废话不多说,直接贴代码
html代码:
<div class="fenye clear hide">
<!-- 每页显示的数据 -->
<span style="font-size:16px">每页显示 </span>
<el-select v-model="value" style="width:8%;height:30px !important;margin-right:30px;padding:1px 1px 2px;" @change="pasizechange">
<el-option style="height:30px !important;"
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 每页显示的数据 -->
<button class="pageup page" @click="tiaofenye(1)">上一页</button>
<button class="page yema active2 hide pageqian" @click="tiaofenye(3,$event)"></button>
<button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>
<button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>
<button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>
<button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>
<div class="shengluehao hide">…</div>
<button class="page yema hide pagehou" @click="tiaofenye(3,$event)"></button>
<button class="pagedown page" @click="tiaofenye(2)"> 下一页</button>
<div style="display:inline-block">
<input type="text" name="" ref="smallpage" class="page" style="width:50px;">
<button class=" page yema " style="width:45px;text-align:left" :disabled="smallpageCheck" @click="tiaofenye(4,$event)"> 前往</button>
</div>
<button class="pageup page" style="width:50px;" @click="tiaofenye(5)">首页</button>
<button class="pagedown page" style="width:50px;" @click="tiaofenye(6)"> 尾页</button>
</div>
js代码:
options: [{ //新添加的分页显示的pageSize数组
value: '10',
label: '10'
}, {
value: '20',
label: '20'
}, {
value: '30',
label: '30'
}, {
value: '40',
label: '40'
}, {
value: '50',
label: '50'
}],
value: '10', //新添加的分页显示的pageSize
smallpageCheck:false, // 控制跳转的禁用
//上面的是数据个数显示,下面是跳页函数
tiaofenye: function(a, b) {
if(a == 1) {
this.page--;
} else if(a == 2) {
this.page++;
} else if(a==4){
let g=/^[+]{0,1}(\d+)$/;
if(this.$refs.smallpage.value==""||!g.test(this.$refs.smallpage.value)){
this.smallpageCheck=true;
}
else if(this.$refs.smallpage.value<=0){
this.page =1;
}
else if(this.$refs.smallpage.value>Math.ceil(this.totallist / this.value )){
this.page=Math.ceil(this.totallist / this.value );
}
else{
this.smallpageCheck=false;
this.page = Number(this.$refs.smallpage.value);
}
console.log(this.page)
}
else if(a==5){
this.page=1;
}else if(a==6){
this.page=Math.ceil(this.totallist / this.value );
}
else {
this.page = Number($(b.target).text());
}
this.search.pageNo = this.page //搜素的页码
this.getCustomer(1); //页面渲染
this.$refs.smallpage.value="" //清空跳转页的数字
},