網(wǎng)站首頁 編程語言 正文
1.什么是自定義分頁器
當(dāng)我們需要在前端頁面展示的數(shù)據(jù)太多的時候,我們總不能將數(shù)據(jù)展示在一頁上面吧!這時,我們就需要自定義一個分頁器,將數(shù)據(jù)分成特定的頁數(shù)進行展示,每一頁展示固定條數(shù)的數(shù)據(jù)!
2.為什么要用自定義分頁器
如上所說:為了將數(shù)據(jù)分成多頁進行展示,分別閱讀,方便查詢!
3.如何使用自定義分頁器
3.1 自定義分頁器推導(dǎo)過程
雖然!我們有一個封裝好的分頁器源碼,用的時候只需要cv大法就行,但是作為一名優(yōu)秀的程序猿!!我們還是需要知道底層的邏輯是不是!
我們需要明確的是,前端向后端請求的常用方式為get和post請求。分頁的時候,我們應(yīng)該采用get請求的方式給后端傳輸您需要轉(zhuǎn)到的頁數(shù)!!
其次我們還需要知道一個點,queryset對象是支持索引取值和切片操作的,但是不支持負數(shù)索引情況。
接下來,我們來推導(dǎo)一下分頁器的形成的邏輯:
current_page = request.GET.get("page",1) # 獲取用戶想訪問的頁碼 如果沒有 默認展示第一頁
try: # 由于后端接受到的前端數(shù)據(jù)是字符串類型所以我們這里做類型轉(zhuǎn)換處理加異常捕獲
current_page = int(current_page)
except Exception as e:
current_page = 1
# 還需要定義頁面到底展示幾條數(shù)據(jù)
per_page_num = 10 # 一頁展示10條數(shù)據(jù)
# 需要對總數(shù)據(jù)進行切片操作 需要確定切片起始位置和終止位置
start_page = ?
end_page = ?
"""
下面需要研究current_page、per_page_num、start_page、end_page四個參數(shù)之間的數(shù)據(jù)關(guān)系
per_page_num = 10
current_page start_page end_page
1 0 10
2 10 20
3 20 30
4 30 40
per_page_num = 5
current_page start_page end_page
1 0 5
2 5 10
3 10 15
4 15 20
可以很明顯的看出規(guī)律
start_page = (current_page - 1) * per_page_num
end_page = current_page* per_page_num
"""
我們研究完當(dāng)前頁(current_page)、每頁展示的數(shù)據(jù)條數(shù)(per_page_num)、每頁數(shù)據(jù)的起始位置(start_page)和結(jié)束位置(end_page)之后,我們還需要知道的最重要的一點是:
一共需要從數(shù)據(jù)庫取出的數(shù)據(jù)一共有多少條!!!
此時,我們就需要用到python中的一個內(nèi)置方法divmod:它是功能是一個數(shù)除以另一個數(shù)時,返回余數(shù)和商!!如:
>>> divmod(100,10)
(10, 0) # 10頁
>>> divmod(101,10)
(10, 1) # 11頁
>>> divmod(99,10)
(9, 9) # 10頁
# 余數(shù)只要不是0就需要在第一個數(shù)字上加一
我們可以用它來判斷我們一共需要多少頁!
后端自定義分頁器邏輯詳解:
def book(request):
if request.method == 'GET':
current_page = request.GET.get('page',1) # 獲取用戶需要訪問的頁面,如果沒有默認返回1
try: #異常捕獲,因為前端返回的都是字符串,需要把他們都轉(zhuǎn)成數(shù)字類型,方便下面做運算操作
current_page = int(current_page)
except Exception as e:
current_page = 1 # 用戶輸入啥字母等也默認為1
per_page_num = 10 #每頁展示多少條數(shù)據(jù)
start_page = (current_page - 1) * per_page_num #當(dāng)前頁數(shù)起始數(shù)據(jù)
end_page = current_page * per_page_num #當(dāng)前頁結(jié)束數(shù)據(jù)
book_num = models.Book.objects.all() #將所有數(shù)據(jù)查詢出來
all_count = book_num.count() # 統(tǒng)計一共有多少數(shù)據(jù)
num,more = divmod(all_count,per_page_num) #divmod方法計算需要的總頁數(shù)
if more:
all_page = num + 1 #more為余數(shù),余為0,則剛剛好是num頁數(shù),不為0,則頁數(shù)加1
# 然后我們需要在html頁面的分頁器標(biāo)簽部分,for循環(huán)一下總共需要的num頁數(shù),但是有一個問題是,前端無法使用range()
# 這就需要我們在后端進行循環(huán),再傳到前端
html = ''
a = current_page # 為了下面頁碼高亮調(diào)整
if current_page <6: #當(dāng)頁面小于6時,固定在6上面,為下面的for處理不出現(xiàn)頁碼負數(shù)
current_page = 6
# 訪問第6頁時,只會顯示當(dāng)前頁-5和+6的底部頁碼數(shù),但是當(dāng)頁面小于6時,頁碼會出現(xiàn)0甚至負數(shù),所有我們需要對頁面進行一個設(shè)置,就是上述的a
for i in range(current_page-5,current_page+6):
if a == i:
# 當(dāng)前頁的頁面高亮顯示
html += '<li class="active"><a href="?page=%s" >%s</a></li>' % (i, i)
else:
html += '<li><a href="?page=%s" >%s</a></li>' % (i, i)
book_queryset = book_num[start_page:end_page]
return render(request,'book.html',locals())
前端頁面部分:
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{{ html|safe }}
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
3.2 自定義分頁器封裝代碼
封裝好的分液器
3.3 封裝好分頁器的使用
后端
def get_book(request):
book_list = models.Book.objects.all()
current_page = request.GET.get("page",1)
all_count = book_list.count()
page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10)
page_queryset = book_list[page_obj.start:page_obj.end]
return render(request,'booklist.html',locals())
前端
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{% for book in page_queryset %}
<p>{{ book.title }}</p>
{% endfor %}
{{ page_obj.page_html|safe }}
</div>
</div>
</div>
原文鏈接:https://www.cnblogs.com/suncolor/p/16586256.html
相關(guān)推薦
- 2022-04-16 python?import模塊時有錯誤紅線的原因_python
- 2023-10-25 更簡單的方法實現(xiàn)el-calendar日歷組件中點擊上個月、今天、下個月按鈕時的點擊事件
- 2022-04-10 Blazor組件事件處理功能_基礎(chǔ)應(yīng)用
- 2023-07-14 element組件中的時間選擇器,禁用選擇時間,picker-options屬性詳解,時間選擇器范圍
- 2022-02-03 ionic 富文本編輯樣式后,前臺不能回顯樣式
- 2022-09-18 GO語言原生實現(xiàn)文件上傳功能_Golang
- 2022-08-02 Python?生成器yield原理及用法_python
- 2022-08-13 IDEA快速展開和折疊方法代碼快捷鍵
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支