Python+Flask實(shí)現(xiàn)自定義分頁的示例代碼
前言
分頁操作在web開發(fā)中幾乎是必不可少的,而我們的flask不像django自帶封裝好的分頁操作,要分頁則需要依賴flask-sqlalchemy中的分頁查詢,但是分頁這么重要且簡單的操作,自己實(shí)現(xiàn)必須要會(huì)這個(gè)思維,我也在網(wǎng)上看了一些,但大體上不合我意,因此這篇我?guī)Т蠹沂謱懸粋€(gè)分頁操作!
后端
后端思路
寫這個(gè)分頁操作前我們首先要思考我們需要什么?我們需要將我們需要的東西封裝到一個(gè)字典里,然后傳給前端!那么這里我先說分頁算法,很簡單!
有兩個(gè)核心:總頁數(shù),偏移量
total_pages = math.ceil(totals / page_size)
數(shù)據(jù)總條數(shù)/每一頁的數(shù)據(jù),然后向上取整,就是我們當(dāng)前的總頁數(shù)!
偏移量是我們數(shù)據(jù)查詢時(shí)從那條數(shù)據(jù)開始獲取我們的當(dāng)前數(shù)據(jù),比如每頁有十條數(shù)據(jù),我們要取第二頁的數(shù)據(jù)(即11-20條數(shù)據(jù)),這里偏移量就是10,相當(dāng)于從第十條數(shù)據(jù)開始(不包含10),查詢十條數(shù)據(jù)(sql里的limit)!
那么這個(gè)偏移量算法:
offset = (current_page - 1) * page_size
當(dāng)前頁頁碼減一,然后乘上每頁的數(shù)據(jù)即是我們的偏移量。
這兩個(gè)核心是分頁操作的關(guān)鍵,但在具體實(shí)現(xiàn)上還需要加一些判斷!
除了這些,你在想想你還需要把那些參數(shù)封裝到字典里傳給前端,加入進(jìn)去就可以!
- 上一頁,下一頁
- 每頁多少條數(shù)據(jù)
- 當(dāng)前頁碼
- 最大頁碼
- 數(shù)據(jù)總條數(shù)
- 頁碼范圍
- ···
后端代碼
def Pagination(page_num,totals):
ret = {"prev_page": page_num - 1, # 上一頁
"next_page": page_num + 1, # 下一頁
"current_page": 0, # 當(dāng)前頁
"total_pages": 0, # 總頁數(shù)
"max_page": 0, # 最大頁
"page_size": app.config["PAGE_SIZE"], # 每頁的數(shù)據(jù),放在配置中方便更改
"totals": totals, # 數(shù)據(jù)總條數(shù)
"offset": 0, # 偏移量
"page_range": None # 頁碼范圍
}
ret["total_pages"] = math.ceil(totals / ret["page_size"])
ret["max_page"] = ret["total_pages"]
if page_num <= 1:
page_num = 1
ret["prev_page"] = 1
if page_num >= ret["max_page"]:
page_num = ret["max_page"]
ret["next_page"] = ret["max_page"]
ret["current_page"] = page_num
if totals == 0:
ret["offset"] = 0
else:
ret["offset"] = (ret["current_page"] - 1) * ret["page_size"]
page_range = []
for i in range(1,ret["max_page"]+1):
page_range.append(i)
ret["page_range"] = page_range
return ret
使用它只需將請求頁碼和數(shù)據(jù)總條數(shù)傳進(jìn)去就可以了!
我們來看視圖操作:
@app.route("/index")
def index():
page_num = int(request.args.get("page",1))
query = User.query
# 分頁
totals = query.count()
pagination = Pagination(page_num, totals)
if totals != 0:
data_list = query.offset(pagination["offset"]).limit(pagination["page_size"]).all()
else:
data_list = []
pagination["data_list"] = data_list
return render_template("account/index.html",pagination=pagination)現(xiàn)在一看絕對清晰了吧,不急,看完前端你會(huì)更清晰!
前端
前端思路
我們python項(xiàng)目對于 jinjia2 還是有依賴性的,就我個(gè)人而言,他可以幫助我們簡化復(fù)雜的 javascript 操作,便于數(shù)據(jù)展示,對于這個(gè)分頁也是如此!
對于這個(gè)分頁,則是要依賴后端傳過來的頁碼范圍page_range,這是一個(gè)列表,里面放的是我們的所有頁碼,我們只需要循環(huán)展示這些頁碼供用戶點(diǎn)擊就行,當(dāng)循環(huán)展示的頁碼等于當(dāng)前頁時(shí)變個(gè)色就行!
思路就是這樣沒有問題,網(wǎng)上也基本就是這么做的!

但這樣做有一個(gè)問題,就是如果你的數(shù)據(jù)頁數(shù)很多,難道你要全部循環(huán)展示嗎,基本都超出頁面了!
對于解決這個(gè)問題最簡單的方法就是設(shè)置一個(gè)頁碼閾值,(我直接在前端寫數(shù)字了,你可以在后端封裝到分頁的 ret 字典里或者寫到flask配置中,便于更改),當(dāng)總頁數(shù)大于這個(gè)閾值時(shí),不循環(huán)展示頁碼,在上一頁和下一頁中間展示一個(gè)省略號(hào)就行!

前端代碼
ui框架用的bootstrap
<!--分頁代碼-->
<div class="row">
<div class="col-lg-12">
<span class="pagination_count" style="line-height: 40px;">共{{ pagination.totals }}條數(shù)據(jù) | {{ pagination.total_pages }}頁</span>
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="{{ url_for('food_page.index') }}?page={{ pagination.prev_page }}">«</a></li>
{% if pagination.total_pages <= 15 %}
{% for k in pagination.page_range %}
{% if pagination.current_page == k %}
<li class="active"><a href="{{ url_for('food_page.index') }}?page={{ k }}">{{ k }}</a></li>
{% else %}
<li><a href="{{ url_for('food_page.index') }}?page={{ k }}">{{ k }}</a></li>
{% endif %}
{% endfor %}
{% else %}
<li><a href="javascript:void(0);">...</a></li>
{% endif %}
<li><a href="{{ url_for('food_page.index') }}?page={{ pagination.next_page }}">»</a></li>
</ul>
</div>
</div>到此這篇關(guān)于Python+Flask實(shí)現(xiàn)自定義分頁的示例代碼的文章就介紹到這了,更多相關(guān)Python Flask自定義分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Python操作word實(shí)現(xiàn)添加文字或圖片水印
這篇文章主要為大家詳細(xì)介紹了如何使用Spire.Doc for Python在程序中的輕松添加文字和圖像水印到Word文檔,感興趣的小伙伴可以跟隨小編一起了解一下2023-10-10
深入理解Python虛擬機(jī)中的Code?obejct
在本篇文章當(dāng)中主要給大家深入介紹在?cpython?當(dāng)中非常重要的一個(gè)數(shù)據(jù)結(jié)構(gòu)?code?object!?我們簡單介紹了一下在?code?object?當(dāng)中有哪些字段以及這些字段的簡單含義,在本篇文章當(dāng)中將會(huì)舉一些例子以便更加深入理解這些字段2023-04-04
Django-Xadmin后臺(tái)首頁添加小組件報(bào)錯(cuò)的解決方案
這篇文章主要介紹了Django-Xadmin后臺(tái)首頁添加小組件報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
pytorch 實(shí)現(xiàn)多個(gè)Dataloader同時(shí)訓(xùn)練
這篇文章主要介紹了pytorch 實(shí)現(xiàn)多個(gè)Dataloader同時(shí)訓(xùn)練的操作,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-05-05
pip安裝時(shí)ReadTimeoutError的解決方法
今天小編就為大家分享一篇pip安裝時(shí)ReadTimeoutError的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-06-06
Python獲取當(dāng)前公網(wǎng)ip并自動(dòng)斷開寬帶連接實(shí)例代碼
這篇文章主要介紹了Python獲取當(dāng)前公網(wǎng)ip并自動(dòng)斷開寬帶連接實(shí)例代碼,具有一定借鑒價(jià)值,需要的朋友可以參考下2018-01-01
Python使用?TCP協(xié)議實(shí)現(xiàn)智能聊天機(jī)器人功能
TCP協(xié)議適用于對效率要求相對較低而準(zhǔn)確性要求很高的場合,下面通過本文給大家介紹基于Python?使用?TCP?實(shí)現(xiàn)智能聊天機(jī)器人,需要的朋友可以參考下2022-05-05

