利用SQLAlchemy和Bootstrap實現(xiàn)數(shù)據(jù)分頁顯示

2019-11-11 02:51:34

字體：大中小

供稿：網(wǎng)友

隨著Web業(yè)務(wù)拓展，數(shù)據(jù)量會不斷增長，如果在一個頁面上將全部數(shù)據(jù)一次性顯示出來，服務(wù)器和瀏覽器都會受到很大影響，不切合實際。一般的解決方式是采用分頁顯示的辦法。在Flask框架中，可以利用SQLAlchemy實現(xiàn)分頁查詢，結(jié)合Bootstrap提供的強大CSS分頁效果，完美地實現(xiàn)分頁導(dǎo)航的效果。

0x01 創(chuàng)建虛擬數(shù)據(jù)

為了更好地體現(xiàn)顯示分頁效果，我們先在數(shù)據(jù)模型中虛擬足夠的模擬數(shù)據(jù)。在Python中，我們可以利用Forgerypy來實現(xiàn)（參見利用ForgeryPy生成虛擬數(shù)據(jù)）。下面我們直接寫兩個函數(shù)來實現(xiàn)實驗數(shù)據(jù)的生成：

Users.py:

#生成模擬數(shù)據(jù)@staticmethoddef generate_fake(count=100): from sqlalchemy.exc import IntegrityError from random import seed import forgery_py seed() for i in range(count): u=Users() u.username=forgery_py.internet.user_name(True) u.email=forgery_py.internet.email_address() u.passWord=forgery_py.lorem_ipsum.word() u.confirmed=True u.about_me=forgery_py.lorem_ipsum.sentence() u.realname=forgery_py.name.full_name() u.location=forgery_py.address.city() u.registerTime=forgery_py.date.date(True) db.session.add(u) try: db.session.commit() except IntegrityError: #回滾 db.session.rollback()

Posts.py:

@staticmethoddef generate_fake(c=100): from random import randint,seed import forgery_py from Users import Users seed() count=db.session.query(Users).count() for i in range(c): u=db.session.query(Users).offset(randint(0,count-1)).first() p=Posts(author=u) p.body=forgery_py.lorem_ipsum.sentence() p.timestamp=forgery_py.date.date(True) db.session.add(p) db.session.commit()

0x02 渲染數(shù)據(jù)

定義支持分頁顯示的路由：

#分頁顯示page=request.args.get('page',1,type=int)pagination=Posts.query.order_by(Posts.timestamp.desc()).paginate( page,per_page=5, error_out=False)posts=pagination.itemsreturn render_template('main/index.html',posts=posts,form=form,pagination=pagination)

通過request.args.get獲取需要顯示的頁碼（type定義為整數(shù)，異常默認(rèn)為1），per_page定義了每頁顯示的記錄的個數(shù)。error_out參數(shù)如果設(shè)置成True，當(dāng)請求的頁數(shù)超過了總的頁數(shù)范圍，就會返回一個404錯誤，如果設(shè)為False，就會返回一個空列表。這樣修改后，頁面只會顯示有限的記錄數(shù)量。

0x03 添加分頁導(dǎo)航

paginate()方法返回了一個Pagination對象。這個類在Flask-SQLAlchemy中定義，包含大量屬性和方法，可以非常方便地生成分頁導(dǎo)航模型。

屬性：

序號	屬性	說明
1	items	當(dāng)前頁的記錄個數(shù)
2	query	分頁的源查詢
3	page	當(dāng)前的頁數(shù)
4	PRev_num	上一頁數(shù)
5	next_num	下一頁數(shù)
6	has_prev	是否有上一頁
7	has_next	是否有下一頁
8	pages	總的頁數(shù)
9	per_page	每頁顯示的記錄條數(shù)
10	total	總的記錄條數(shù)

方法：

序號	方法	說明
1	iter_pages(left_edge=2,left_current=2,right_current=5,right_age=2)	一個迭代器，返回選中當(dāng)前頁時顯示的頁數(shù)列表。如這個例子中最左邊顯示2個頁數(shù)，當(dāng)前頁的左邊顯示2個頁數(shù)，當(dāng)前頁的右邊顯示5個頁數(shù)而當(dāng)前頁的最右邊顯示2個頁數(shù)
2	prev()	上一頁的分頁對象
3	next()	下一頁的分頁對象

結(jié)合Bootstrap提供的分頁CSS效果，我們可以實現(xiàn)一個美觀的分頁導(dǎo)航。定義一個macro宏（/templates/_macros.html）：

{% macro pagination_widget(pagination, endpoint, fragment='') %}<div class="pagination"> <ul class="pagination"> <li{% if not pagination.has_prev %} class="disabled"{% endif %}> <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> « </a> </li> {% for p in pagination.iter_pages() %} {% if p %} {% if p == pagination.page %} <li class="active"> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% else %} <li> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% endif %} {% else %} <li class="disabled"><a href="#">…</a></li> {% endif %} {% endfor %} <li{% if not pagination.has_next %} class="disabled"{% endif %}> <a href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> » </a> </li></ul></div>{% endmacro %}

可以在視圖這樣就實現(xiàn)了分頁導(dǎo)航的效果：

0x04 功能拓展

我們可以對分頁導(dǎo)航進(jìn)行拓展（參見Bootstrap學(xué)習(xí)總結(jié)筆記（12）– 基本組件之分頁）。

_macros.html中添加跳轉(zhuǎn)功能：

在視圖模板中加入js代碼：

{%block scripts%}{{super()}}<script type="text/javascript"> $(function(){ $('#transfer').click(function(){ var page=$('#transfer_page').val(); window.location.href="{{url_for('main.index')}}"+"?page="+page; }) })</script>

效果如下：