/**
* 用于分页的JS文件，必须在引用vue.js文件后才可引入本文件
* 编码人：苏飞
* 编码时间：2019-01-21
* */
//当前页
Vue.prototype.pageIndex = 0;
//总行数
Vue.prototype.totalcount = 0;
//每页行数
Vue.prototype.pageSize = 0;
//总页数
Vue.prototype.pageCount = 0;
//更新分页数据 总行数，每页行数，当前页
Vue.prototype.setpage = function (totalcount, pagesize, pageindex) {
this.pageCount = Math.ceil(totalcount / pagesize);
this.totalcount = totalcount;
this.pageSize = pagesize;
this.pageIndex = pageindex;
};
//清理分页数据
Vue.prototype.clear = function () {
//当前页
this.pageIndex = 0;
//总行数
this.totalcount = 0;
//总页数
this.pageCount = 0;
//每页行数
this.pageSize = 0;
};
//分页显示数量动态加载方法
Vue.prototype.indexs = function () {
//开始页
var left = 1;
//结束页
var right = this.pageCount;
//在显示的页码数组
var ar = [];
if (this.pageCount >= 10) {
if (this.pageIndex > 6 && this.pageIndex < this.pageCount - 4) {
left = this.pageIndex - 5
right = this.pageIndex + 4
} else {
if (this.pageIndex <= 6) {
left = 1
right = 10
} else {
right = this.pageCount
left = this.pageCount - 8
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
};
//设置分页的数据三个参数为：1总行数据，2每页多少行，3当前要显示的页码
rw.setpage(info.TotalCount, info.pageSize, info.pageIndex);
//清理分页数据
rw.clear();
<div class="pagination-wrap">
<div class="count">
<div>
总页数 {{ pageCount}} 总记录数 {{ totalcount}}
</div>
</div>
<ul class="pagination" v-if="pageCount > 1">
<li v-if="pageIndex>1"><a class="acursor" href="javascripit:void(0)" v-on:click="getdata(1)">
首页</a></li>
<li v-if="pageIndex>1"><a class="acursor" v-on:click="pageIndex--,getdata(pageIndex)">
上一页</a></li>
<li v-for="n in indexs" v-bind:class="pageIndex === n ? 'cur':''"><a class="acursor"
v-on:click="getdata(n)">{{ n }}</a> </li>
<li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="pageIndex++,getdata(pageIndex)">
下一页</a></li>
<li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="getdata(pageCount)">
尾页</a></li>
</ul>
</div>
getdata(pageIndex)
| 欢迎光临 苏飞论坛 (http://www.sufeinet.com/) | Powered by Discuz! X3.4 |