效果图如下:
样式可以自己随便设置
html代码:
<div class="page-bar">
<ul>
<li>
<a style="border: none;padding: 6px 8px;"
>总共<i>{{ total }}</i
>个项目</a
>
</li>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()"><</a>
</li>
<li v-if="cur==1"><a class="banclick"><</a></li>
<li
v-for="index in indexs"
v-bind:class="{ 'active': cur == index}"
>
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()">></a>
</li>
<li v-if="cur == all"><a class="banclick">></a></li>
</ul>
</div>
css代码:
/*分页*/
.page-bar{
width: 540px;
height: 30px;
margin: 40px 20px 30px 555px;
margin-top: 10px;
margin-bottom: 30px;
position: absolute;
bottom: 10px;
}
ul,li{
margin: 0px;
padding: 0px;
}
li{
list-style: none
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a{
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #5D6062;
cursor: pointer;
margin-right: 4px;
}
.page-bar a:hover{
background-color: #eee;
}
.page-bar a.banclick{
cursor:not-allowed;
}
.page-bar .active a{
color: #fff;
cursor: default;
background-color: #C98743;
border-color: #C98743;
}
.page-bar i{
font-style:normal;
margin: 0px 4px;
font-size: 12px;
}
js代码:
data{
all: 0, //总页数
cur: 1, //当前页码
totalPage: 5, //当前条数
total:0,//总数
}
//这个是分页数据的接口,替换成自己的数据接口就行
zhengdanList(index,demandtypeDate){
const _this = this
const params = {
page: index||1,
size: this.totalPage,
status: demandtypeDate||1,
}
$.ajax({
url: `https://common-api${getEnv()}.homedo.com/bff-common-api/solicitationFor/singleTable`,
type: 'POST',
headers:{ticket:$HMD$.Cookie('ticket')},
data: JSON.stringify(params),
dataType: 'json',
contentType: 'application/json',
success: function (res) {
if(res.respCode == '0000' && res.data && res.data.items){
_this.demandList = res.data.items
_this.total = res.data.count
_this.all = Math.ceil(res.data.count / res.data.size) //总页数
_this.cur = res.data.page //当前页码
_this.totalPage = res.data.size //当前条数
}
},
//分页
btnClick(data) {
//页码点击事件
if (data != this.cur) {
this.cur = data
}
//根据点击页数请求数据
this.tab2(this.cur.toString())
},
pageClick() {
//根据点击页数请求数据
this.tab2(this.cur.toString())
},