Flask——分頁

codelife發表於2019-08-24
Flask

分頁的兩種方法

  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 %}
  1. 使用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
        })
    }
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章