用VUE实现的一个分页。
代码语言：javascript复制var myMsgTable = new Vue({
el: '#myMsgTable',
data: {
list: [],
total: 0,
pageSize: 20,
page: 1,
rows: 0
},
computed: {
totalPage: function () {
if (this.total == 0) {
return 1;
}
return parseInt((this.total this.pageSize - 1) / this.pageSize);
},
offset: function () {
return (this.page - 1) * this.pageSize;
},
limit: function () {
return this.pageSize;
},
isFirstPage: function () {
return this.page == 1;
},
isLastPage: function () {
return this.page === this.totalPage;
}
},
methods: {
nextPage: function () {
if (this.page < this.totalPage) {
this.page ;
this.loadPage();
}
},
prevPage: function () {
if (this.page > 1) {
this.page--;
this.loadPage();
}
},
goPage: function (page) {
if (this.page == page) {
return;
}
this.page = page;
this.loadPage();
},
loadPage: function () {
var _this = this;
$.post('/data.json', {
offset: this.offset,
limit: this.pageSize
}, function (data) {
_this.$set("list", data.rows);
_this.$set("total", data.total);
});
}
}
});下面是表格：
代码语言：javascript复制<table id='myMsgTable'>
<tr>
<th>标题</th>
<th width="573">消息内容</th>
<th>消息时间</th>
</tr>
<tr v-for="p in list" v-bind:class="{'b1':$index%2}">
<td>{{p.readStatus==2?'':'[未读]'}}{{p.title}}</td>
<td>{{p.content}}</td>
<td>{{p.sendTime | date 'YYYY-MM-DD HH:mm'}}</td>
</tr>
<tr>
<td colspan=" 4">
<div class="commonPage" style="margin:0">
<span><a href="#" v-on:click="goPage(1)">首页</a></span>
<span><a href="#" v-on:click="prevPage"
v-bind:disabled="isFirstPage">上一页</a></span>
<span><a href="#" v-on:click="nextPage" v-bind:disabled="isLastPage">下一页</a></span>
<span><a href="#" v-on:click="goPage(this.totalPage)">末页</a></span>
<span>共{{total}}条记录</span>
<span>共{{totalPage}}页</span>
<span>跳转到</span>
<select v-on:change="goPage(this.page)" v-model="page">
<option value="{{n 1}}" v-for="n in totalPage">{{n 1}}</option>
</select>
<span>页</span>
</div>
</td>
</tr>
</table>
