vue简单操作分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zql_csdn/article/details/86552097

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

js

[code]$.ajax({
url:"getBalanceData.html",
success:function(msg){
var msg=Number(msg).toFixed(2);
let balance = new Vue({
el:"#balance",
da
4000
ta:{
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

[code]<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>

效果图如下