分页

分页的两种方法

使用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 %}

vue分页

获取分页数据

from app.admin.model.Article import Article

@admin.route("/article", methods=['GET','POST'])
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 ajax(1,data={'list':data,'pages':pages})#返回状态和数据，ajax是在模块初始化文件中定义的返回特定json数据的函数
    return render_template("admin/article_list.html")

模块初始化文件

# 处理返回数据
def ajax(code=1, msg='ok', data=None):
     return jsonify({'status': int(code), 'msg': msg, 'data': data})

分页模板

<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;
        })
    },
    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
        })
    }