## 分页的两种方法
1. 使用flask-sqlalchemy里自带的方法
模型类中调用paginate方法查询数据，并返回到视图文件
~~~
@home.route("/")
def index():
page = request.args.get('page', 1, type=int)
data = Article.query.filter_by(status=1).order_by(Article.id.desc()).paginate(page=page, per_page=10)
#如果想在模板中遍历数据，则遍历data里的items
return render_template("index/index.html", data=data)
~~~
在视图文件中把分页模块导入为一个变量，在分页位置调用分页方法，传入数据和url
~~~
{% import 'page/page_admin.html' as pg %}
{{ pg.page(page, 'admin.index') }}
~~~
~~~
分页模板
{% macro page(data, url) %}
{% if data %}
<div class="text-center">
<div class="btn-group">
{% if data.has_prev %}
<a class="btn btn-white" type="button" href="{{ url_for(url, page=data.prev_num) }}"><i class="fa fa-chevron-left"></i>
</a>
{% else %}
<a class="btn btn-white" type="button"><i class="fa fa-chevron-left"></i>
</a>
{% endif %}
<a class="btn btn-white" href="{{ url_for(url, page=1) }}">首页</a>
{% for page in data.iter_pages() %}
{% if page %}
{% if page == data.page %}
<a class="btn btn-white active">{{ page }}</a>
{% else %}
<a class="btn btn-white" href="{{ url_for(url, page=page) }}">{{ page }}</a>
{% endif %}
{% endif %}
{% endfor %}
<a class="btn btn-white" href="{{ url_for(url, page=data.pages) }}">尾页</a>
{% if data.has_next %}
<a class="btn btn-white" type="button" href="{{ url_for(url, page=data.next_num) }}"><i class="fa fa-chevron-right"></i></a>
{% else %}
<a class="btn btn-white" type="button"><i class="fa fa-chevron-right"></i></a>
{% endif %}
</div>
</div>
{% endif %}
{% endmacro %}
~~~
2. 使用vue方法
获取数据
~~~
@login_require
def article_list():
if request.method == 'POST':
param = request.get_json()
num = param.get('num',10)#每页显示数量
page = param.get('page', 1)#当前第几页
skip = (page-1)*num#偏移量
lists = Article.query.order_by(Article.id.desc()).limit(num).offset(skip).all()
count = Article.query.count()#总数
pages = math.ceil(count/num)#总页数
if lists:
data = []
for i in lists:
data.append(i.to_json())#此处是把数据对象转换为json格式并添加到列表中返回
return jsonify(ajax(1,data={'list':data,'pages':pages}))#返回状态和数据
return render_template("admin/article_list.html")
~~~
分页模板
~~~
<div id='box'>
<ul class="pagination pull-right" id="page">
<li class="footable-page-arrow " :class="{'disabled':current == 1}" @click="currentPage(1)">
<a>«</a>
</li>
<li class="footable-page-arrow " :class="{'disabled':current == 1}" @click="current-- && currentPage(current)">
<a>‹</a>
</li>
<li class="footable-page" v-for="item in pages" @click="currentPage(item)" :class="{'active':current == item}">
<a>{{ item }}</a>
</li>
<li class="footable-page-arrow" :class="{'disabled':allPage == current}" @click="current++ && currentPage(current)">
<a>›</a>
</li>
<li class="footable-page-arrow" :class="{'disabled':allPage == current}" @click="currentPage(allPage)">
<a>»</a>
</li>
</ul>
</div>
~~~
vue代码
~~~
var app = new Vue({
el:"#box",
data:{
pages:[],#当前显示的页码列表
showItem:5,#页码显示数量
current :1,#当前页码
allPage:0#总页码
},
methods:{
list:function(){
_this = this;
formData = {}
list(formData,function(response){
_this.allPage = response.data.pages;//总页数
var i;
var pag=[];
if(_this.allPage>_this.showItem){
i=_this.showItem;
}else{
i=_this.allPage;
}
while(i){
pag.unshift(i--);
}
_this.pages=pag;
console.log(response.data);
})
},
currentPage:function (e){
this.current = e;
var current=e;
var showItem=5;
param = {page:current}
list(param,function(result){
_this.allpage=result.data.pages;
var pag = [];
if( current < showItem ){ //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(current,_this.allpage);
var num;
if(i<showItem){
num=showItem;
}
if(_this.allPage<showItem){
num=_this.allPage;
}
while(num){
pag.unshift(num--);
}
}else{ //当前页数大于显示页数了
var middle = current - Math.floor(showItem / 2 ),//从哪里开始
i = showItem;
if( middle > (_this.allPage - showItem) ){
middle = (_this.allPage - showItem) + 1;
}
while(i--){
pag.push( middle++ );
}
}
_this.pages=pag;
});
}
}
})
function list(formData={}, cb){
axios.post("url",
formData
)
.then(function (response) {
return cb(response.data)
})
.catch(function (error) {
self.fetchError = error
})
}
~~~
