vue分页效果

js部分

<script src="....js/vue.js"></script>
<script src="..../js/vue-resource.min.js"></script>
<script type="text/javascript">

var pagitation=new Vue({
el:'#app',
data: {
// 省略的符号
sign:'...',
// 省略号位置
signIndex:3,
// 总页数
totalPageCount: 8,
// 当前页
currentPage:1,
// 显示在页面的数组列表
pagingList:[],
lists:[]
},
watch: {
totalPageCount:function(val) {
var that = this
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},
currentPage:function(val) {
var that = this
that.init()
}
},
methods: {
//获取订单数据
getorder:function(){
this.$http.post("请求数据的URL",{
page:this.currentPage //传递请求页面
}, {
headers: {
"X-Requested-With": "XMLHttpRequest"
},
emulateJSON: true
}).then(function(res){
json=JSON.parse(res.body);
this.lists=json.data.lists; //获取数据
this.totalPageCount=json.data.maxPage;//获取总页数
})
},
// 初始化数据
fetchData:function() {
var that = this

that.pagingList = [];
var tmp = null;

if ((that.totalPageCount) > 6) {
if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
for (var i=1;i<7;i++) {
if (i < that.signIndex) {
tmp = {key:i, value:i }
} else if (i== that.signIndex) {
tmp = {key:that.sign, value:0 }
} else if (i == (that.signIndex + 1) ) {
tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
} else {
tmp = {key:that.totalPageCount, value:that.totalPageCount }
}
that.pagingList.push(tmp)
}
} else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
var starNum = that.totalPageCount - 5;
for (var i=starNum;i<starNum+6;i++) {
tmp = {key:i, value:i }
that.pagingList.push(tmp)
}
} else {
var starNum = that.currentPage - 1;
for (var i=1;i<7;i++) {
if (i < that.signIndex) {
tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }
} else if (i== that.signIndex) {
tmp = {key:that.sign, value:0 }
} else if (i == (that.signIndex + 1) ) {
tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
} else {
tmp = {key:that.totalPageCount, value:that.totalPageCount }
}
that.pagingList.push(tmp)
}
}
} else {
for (var i =0; i <that.totalPageCount; i++) {
tmp = {key:i+1, value:i+1 }
that.pagingList.push(tmp)
}
}
},
// 跳转到某页码
next:function(num) {
var that = this
if (num <= 1) that.currentPage = 1;
else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
else that.currentPage = num;
//location.href="/asm/order?page"+that.currentPage;
},
init:function() {
var that = this

that.fetchData();
that.getorder();
}
},
mounted:function() {
var that = this

that.init()
}
});
</script>

HTML部分

<div id="app" >

<table>

<tbody>
<tr v-for="(item,index) in orders">
<td style="border:1px solid #f1f2f7">{{item.orderNo}}</td>
<td style="border:1px solid #eeeff2">
<p>{{item.createTime}}</p>
</td>
<td style="border:1px solid #eeeff2">
<p>{{item.channel}}</p>
</td>
<td style="border:1px solid #eeeff2">
<p style="color:#5368fb">{{item.amount}}</p>
</td>
<td style="border:1px solid #eeeff2" v-if="item.status==0">
<p value="未支付" disabled>未支付</p>
<button value="再次支付">再次支付</button>
</td>

<td style="border:1px solid #eeeff2" v-else>
<p value="已支付" disabled>已支付</p>
</td>
</tr>

<td colspan="5" v-if="orders.length<=0" style="background-color: #ffffff;">暂无订单</td>
<!--此处是实时信息数据表-->


</tbody>
</table>
<!-- 表格 -->
<div class="aso-pg-rank__pagination" id="aso-pg-rank__pagination" v-cloak>
<div>共{{currentPage}}/{{totalPageCount}}页</div>
<ul class="aso-pagination" first-text="第一页" last-text="最后一页" max-size="50" next-text="下一页" previous-text="上一页">
<li class="pagination-first ">
<a v-if="currentPage == 1" >第一页</a>
<a v-else href="javascript:;" @click="next(1)">第一页</a>
</li>
<li class="pagination-prev" v-if="currentPage>1"><a href="javascript:;" @click="next(currentPage-1)">下一页</a></li>
<li v-for="item in pagingList" class="pagination-page">
<a v-if="currentPage==item.key || sign ==item.key" class="activeye">{{item.key}}</a>
<a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
</li>

<li class="pagination-next" v-if="currentPage<totalPageCount"><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
<li class="pagination-last">
<a v-if="totalPageCount == currentPage">尾页</a>
<a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
</li>
</ul>
</div>
</div>