Python+Flask實(shí)現(xiàn)自定義分頁(yè)的示例代碼
前言
分頁(yè)操作在web開(kāi)發(fā)中幾乎是必不可少的,而我們的flask不像django自帶封裝好的分頁(yè)操作,要分頁(yè)則需要依賴flask-sqlalchemy中的分頁(yè)查詢,但是分頁(yè)這么重要且簡(jiǎn)單的操作,自己實(shí)現(xiàn)必須要會(huì)這個(gè)思維,我也在網(wǎng)上看了一些,但大體上不合我意,因此這篇我?guī)Т蠹沂謱?xiě)一個(gè)分頁(yè)操作!
后端
后端思路
寫(xiě)這個(gè)分頁(yè)操作前我們首先要思考我們需要什么?我們需要將我們需要的東西封裝到一個(gè)字典里,然后傳給前端!那么這里我先說(shuō)分頁(yè)算法,很簡(jiǎn)單!
有兩個(gè)核心:總頁(yè)數(shù),偏移量
total_pages = math.ceil(totals / page_size)
數(shù)據(jù)總條數(shù)/每一頁(yè)的數(shù)據(jù),然后向上取整,就是我們當(dāng)前的總頁(yè)數(shù)!
偏移量是我們數(shù)據(jù)查詢時(shí)從那條數(shù)據(jù)開(kāi)始獲取我們的當(dāng)前數(shù)據(jù),比如每頁(yè)有十條數(shù)據(jù),我們要取第二頁(yè)的數(shù)據(jù)(即11-20條數(shù)據(jù)),這里偏移量就是10,相當(dāng)于從第十條數(shù)據(jù)開(kāi)始(不包含10),查詢十條數(shù)據(jù)(sql里的limit)!
那么這個(gè)偏移量算法:
offset = (current_page - 1) * page_size
當(dāng)前頁(yè)頁(yè)碼減一,然后乘上每頁(yè)的數(shù)據(jù)即是我們的偏移量。
這兩個(gè)核心是分頁(yè)操作的關(guān)鍵,但在具體實(shí)現(xiàn)上還需要加一些判斷!
除了這些,你在想想你還需要把那些參數(shù)封裝到字典里傳給前端,加入進(jìn)去就可以!
- 上一頁(yè),下一頁(yè)
- 每頁(yè)多少條數(shù)據(jù)
- 當(dāng)前頁(yè)碼
- 最大頁(yè)碼
- 數(shù)據(jù)總條數(shù)
- 頁(yè)碼范圍
- ···
后端代碼
def Pagination(page_num,totals): ret = {"prev_page": page_num - 1, # 上一頁(yè) "next_page": page_num + 1, # 下一頁(yè) "current_page": 0, # 當(dāng)前頁(yè) "total_pages": 0, # 總頁(yè)數(shù) "max_page": 0, # 最大頁(yè) "page_size": app.config["PAGE_SIZE"], # 每頁(yè)的數(shù)據(jù),放在配置中方便更改 "totals": totals, # 數(shù)據(jù)總條數(shù) "offset": 0, # 偏移量 "page_range": None # 頁(yè)碼范圍 } 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
使用它只需將請(qǐng)求頁(yè)碼和數(shù)據(jù)總條數(shù)傳進(jìn)去就可以了!
我們來(lái)看視圖操作:
@app.route("/index") def index(): page_num = int(request.args.get("page",1)) query = User.query # 分頁(yè) 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)在一看絕對(duì)清晰了吧,不急,看完前端你會(huì)更清晰!
前端
前端思路
我們python項(xiàng)目對(duì)于 jinjia2 還是有依賴性的,就我個(gè)人而言,他可以幫助我們簡(jiǎn)化復(fù)雜的 javascript 操作,便于數(shù)據(jù)展示,對(duì)于這個(gè)分頁(yè)也是如此!
對(duì)于這個(gè)分頁(yè),則是要依賴后端傳過(guò)來(lái)的頁(yè)碼范圍page_range,這是一個(gè)列表,里面放的是我們的所有頁(yè)碼,我們只需要循環(huán)展示這些頁(yè)碼供用戶點(diǎn)擊就行,當(dāng)循環(huán)展示的頁(yè)碼等于當(dāng)前頁(yè)時(shí)變個(gè)色就行!
思路就是這樣沒(méi)有問(wèn)題,網(wǎng)上也基本就是這么做的!
但這樣做有一個(gè)問(wèn)題,就是如果你的數(shù)據(jù)頁(yè)數(shù)很多,難道你要全部循環(huán)展示嗎,基本都超出頁(yè)面了!
對(duì)于解決這個(gè)問(wèn)題最簡(jiǎn)單的方法就是設(shè)置一個(gè)頁(yè)碼閾值,(我直接在前端寫(xiě)數(shù)字了,你可以在后端封裝到分頁(yè)的 ret 字典里或者寫(xiě)到flask配置中,便于更改),當(dāng)總頁(yè)數(shù)大于這個(gè)閾值時(shí),不循環(huán)展示頁(yè)碼,在上一頁(yè)和下一頁(yè)中間展示一個(gè)省略號(hào)就行!
前端代碼
ui框架用的bootstrap
<!--分頁(yè)代碼--> <div class="row"> <div class="col-lg-12"> <span class="pagination_count" style="line-height: 40px;">共{{ pagination.totals }}條數(shù)據(jù) | {{ pagination.total_pages }}頁(yè)</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)自定義分頁(yè)的示例代碼的文章就介紹到這了,更多相關(guān)Python Flask自定義分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
PyCharm在win10的64位系統(tǒng)安裝實(shí)例
給大家介紹一下在win10的64位系統(tǒng)中安裝PyCharm的操作過(guò)程以及需要注意的地方。2017-11-11Python用內(nèi)置模塊來(lái)構(gòu)建REST服務(wù)與RPC服務(wù)實(shí)戰(zhàn)
這篇文章主要介紹了Python用內(nèi)置模塊來(lái)構(gòu)建REST服務(wù)與RPC服務(wù)實(shí)戰(zhàn),python在網(wǎng)絡(luò)方面封裝一些內(nèi)置模塊,可以用很簡(jiǎn)潔的代碼實(shí)現(xiàn)端到端的通信,比如HTTP、RPC服務(wù),下文實(shí)戰(zhàn)詳情,需要的朋友可以參考一下2022-09-09Python3爬蟲(chóng)學(xué)習(xí)之應(yīng)對(duì)網(wǎng)站反爬蟲(chóng)機(jī)制的方法分析
這篇文章主要介紹了Python3爬蟲(chóng)學(xué)習(xí)之應(yīng)對(duì)網(wǎng)站反爬蟲(chóng)機(jī)制的方法,結(jié)合實(shí)例形式分析了Python3模擬瀏覽器運(yùn)行來(lái)應(yīng)對(duì)反爬蟲(chóng)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12python3實(shí)現(xiàn)爬取淘寶美食代碼分享
本文給大家分享的是如何使用python3來(lái)爬取淘寶美食圖片標(biāo)題等信息的方法和代碼,有需要的小伙伴可以參考下2018-09-09nohup后臺(tái)啟動(dòng)Python腳本,log不刷新的解決方法
今天小編就為大家分享一篇nohup后臺(tái)啟動(dòng)Python腳本,log不刷新的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-01-01Python 窗體(tkinter)下拉列表框(Combobox)實(shí)例
這篇文章主要介紹了Python 窗體(tkinter)下拉列表框(Combobox)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03Python定義二叉樹(shù)及4種遍歷方法實(shí)例詳解
這篇文章主要介紹了Python定義二叉樹(shù)及4種遍歷方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了二叉樹(shù)的概念、原理,以及Python定義與遍歷二叉樹(shù)相關(guān)操作技巧,需要的朋友可以參考下2018-07-07Python合并字典鍵值并去除重復(fù)元素的實(shí)例
下面小編就為大家?guī)?lái)一篇Python合并字典鍵值并去除重復(fù)元素的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12python簡(jiǎn)單實(shí)現(xiàn)操作Mysql數(shù)據(jù)庫(kù)
本文給大家分享的是在python中使用webpy實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)庫(kù)增刪改查操作的方法,非常的簡(jiǎn)單,有需要的小伙伴可以參考下2018-01-01MacOS(M1芯片 arm架構(gòu))下安裝PyTorch的詳細(xì)過(guò)程
這篇文章主要介紹了MacOS(M1芯片 arm架構(gòu))下安裝PyTorch的詳細(xì)過(guò)程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02