vue简单操作分页

分页时vue搭配jQuery组合操作的  样式bootstrap 所需的各类库已在前面引入没有贴出来

js

$.ajax({
	url:"getBalanceData.html",
	success:function(msg){
		var msg=Number(msg).toFixed(2);
		let balance = new Vue({
			el:"#balance",
			data:{
				wrap:true,
				money:msg,
				page:1,//当前页
				rows:5,//每页显示数
				Record:[],//列表数据
				total:0,//总条数
				pages:0,//总页数
				pagePages:0,
				pageList:5,//每页显示分页的数量
				noData:false//无数据返回时的状态，为true时显示暂无数据
			},
			created(){
				this.getBalanceRecord();
			},
			methods:{
				//下一页
				nextPage:function(){
					let that=this;
					if(that.page<that.pages){
						that.page++;
					}
					that.getBalanceRecord();
				},
				//上一页
				PreviousPage:function(){
					let that=this;
					if(that.page>1){
						that.page--;
					}
					that.getBalanceRecord();
				},
				//跳转指定页数
				jumpPage:function(e){
					let that=this;
					that.page=e;
					that.getBalanceRecord();
				},
				//获取余额明细数据
				getBalanceRecord:function(){
					let that=this;
					$.ajax({
						url:"getBalanceRecord.html",
						data:{
							page:that.page,
							rows:that.rows
						},
						success:function(msg){
							if(msg.total>0){
								that.Record=msg.rows;
								that.total=msg.total;
								that.pages=Math.ceil(msg.total/that.rows);
								if(that.page%that.pageList==0){
									that.pagePages=(that.page/that.pageList)-1;
								}else{
									that.pagePages=Math.floor(that.page/that.pageList);
								}
							}else{
								that.noData=true;
							}
						}
					})
				}
			}
		})
	}
})
	

html

<div id="balance">
	<div class="wrap" v-show="wrap" style="display: none;">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">账户余额</h3>
			</div>
			<div class="panel-body conlis">
				<div class="rows">
					<div class="balanceOverview">
						<span>我的余额</span>
						<div class="sign inline">￥</div>
						<div class="balance inline">{{money}}</div>
						<div class="Company inline">元</div>
						<div class="Recharge inline"><button type="button" class="btn btn-info" style="float: none;">充值</button></div>
						<div class="orderRecord">
							<i class="fa fa-list-ul"></i><a href="{:U('Order/order')}">订单记录</a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="rows">
					<span>余额明细</span>
					<ul>
						<li style="border-bottom: 1px dashed">
							<div class="inline">操作</div>
							<div class="inline">流水号</div>
							<div class="inline">操作时间</div>
							<div class="inline">金额</div>
							<div class="inline">备注</div>
						</li>
					</ul>
					<ul v-if="!noData">
						<li v-for="item in Record">
							<div class="inline action">{{item.transaction_type}}</div>
							<div class="inline Serial">{{item.serial_number}}</div>
							<div class="inline date">{{item.transaction_date}}</div>
							<div class="inline money" v-if="item.type==1" style="color: red">-{{item.amount}}</div>
							<div class="inline money" style="color: #00ff00" v-else>+{{item.amount}}</div>
							<div class="inline Remarks">{{item.remarks}}</div>
						</li>
						<div class="page">
							<ul class="pagination pagination-sm">
								<li><a @click="PreviousPage()">&laquo;</a></li>
								<li v-for="n in 5" v-if="n+5*pagePages<=pages"><a @click="jumpPage(n+5*pagePages)" :class="page==n+5*pagePages?'action':''">{{n+5*pagePages}}</a></li>
								<li><a @click="nextPage()">&raquo;</a></li>
							</ul>
						</div>
					</ul>
					<ul v-else><li style="text-align: center;padding: 40px 0;">暂无数据</li></ul>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>

效果图如下