分页思路:
首先是定义页号currentPage 和 页大小pagesize,用一个数组保存总数据;
用一个计算属性page_arrs,作用是 让页面展示的是我们所需要的页面
而我们在page_arrs中要分割原数组,用一个slice()方法进行分割;
在控件button上绑定点击方法,对页号currentPage进行修改,从而修改整个页面展示
Python Django vue {{}} 括号冲突 问题 解决 图文教程
分页css采用了bootstrap的标准代码,在使用时直接引用bootstrap的css即可。
Javascript代码:
var app = new Vue({
delimiters:['{[', ']}'],//区分django的模板标记
el: '#app',
data: {
arrs: {{goods|safe}},//django模板中原样输出
titles : ['序号','服务商','机房',"CPU",'内存','硬盘','带宽','流量','线路','IPV4','架构','价格','库存'],
currentPage : 1,//当前页号
pagesize :12, //每页大小
all:0,//总页数
},
filters:{
formatPrice: function(obj){
$str = '';
if(obj.annual)
$str += '$'+obj.annual+'/年<br/>';
if(obj.quarter)
$str += '$'+obj.quarter+'/季<br/>';
if(obj.month)
$str += '$'+obj.month+'/月<br/>';
return $str;
},
stockToBuy: function(obj){
if( obj.stock === 1 ){
return '<a href="//jiloc.com/go/bwh-'+obj.pid+'" class="btn btn-primary active" role="button" aria-pressed="true">购买</a>';
}else{
return '<button class="btn btn-secondary" disabled="true">售罄</button>';
}
}
},
created: function () {
var self = this;
// $.ajax({
// // url: 'https://vpsdalao.com/api/records?provider=Bandwagon',
// url: '/ajax_goods',
// type: 'get',
// data: {},
// dataType: 'json'
// }).then(function (res) {
// // console.log(res.data)
// self.items = res.data
// }).fail(function () {
// console.log('失败');
// })
},
computed:{
page_arrs(){
let {currentPage,pagesize,all} = this
this.all = Math.ceil(this.arrs.length/pagesize)
return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)
},
indexs: function(){
var left = 1;
var right = this.all;
var ar = [];
if(this.all>= 5){
if(this.currentPage > 3 && this.currentPage < this.all-2){
left = this.currentPage - 2
right = this.currentPage + 2
}else{
if(this.currentPage<=3){
left = 1
right = 5
}else{
right = this.all
left = this.all -4
}
}
}
while (left <= right){
ar.push(left)
left ++
}
return ar
},
current_page(){
return this.currentPage
}
},
methods: {
primaryPage(){
this.currentPage = 1
},
prePage(){
if(this.currentPage == 1){
return
}
this.currentPage = this.currentPage - 1
},
nextPage(){
if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){
return
}
this.currentPage = this.currentPage + 1
},
lastPage(){
this.currentPage = Math.ceil(this.arrs.length/this.pagesize)
},
btnClick: function(data){//页码点击事件
if(data != this.currentPage){
this.currentPage = data
}
},
},
})
HTML代码部分
<div class="container-fluid" id="app">
<section class="text-center">
<h1>VPS库存监控列表</h1>
<p><a href="//jiloc.com/go/bwh">搬瓦工</a>优惠码:<code>BWH3HYATVBJW</code> ,
<p>数据最后更新时间:<code>{{update_time}}</code></p>
</section>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="title in titles">{[title]}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in page_arrs" :key="index">
<td>{[index+1]}#</td>
<td>{[item.company__name]}</td>
<td>{[item.dc]}</td>
<td>{[item.cpu]}</td>
<td>{[item.ram]}</td>
<td>{[item.disk]}</td>
<td>{[item.bandwidth]}</td>
<td>{[item.traffic]}</td>
<td>{[item.route]}</td>
<td>{[item.ipv4]}</td>
<td>{[item.arch]}</td>
<td v-html="$options.filters.formatPrice(item)"></td>
<td v-html="$options.filters.stockToBuy(item)" ></td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="primaryPage"> << </a></li>
<li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="prePage"> < </a></li>
<li v-for="index in indexs" :class="current_page == index ? 'page-item active' : 'page-item' "><a class="page-link" href="#" @click="btnClick(index)">{[ index ]}</a></li>
<li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true">{[current_page]} / {[all]}</a></li>
<li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="nextPage()"> > </a></li>
<li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="lastPage"> >> </a></li>
</ul>
</nav>
</div>