后端和前端分別實現分頁


分頁后端實現

lis = range(1, 51)
from django.core.paginator import Paginator
page_obj = Paginator(lis, 10) # Paginator類實例化,傳一個list,再傳每頁顯示的條數
print(list(page_obj.page(1))) # 取某頁的數據
print(page_obj.count) # 總共多少條
print(page_obj.num_pages) # 總共分了多少頁
print(page_obj.page_range) # 分頁的范圍
cur_page = page_obj.page(1) # 當前頁
print(cur_page.has_previous()) # 判斷是否有上頁,如果當前是第一頁,沒有上頁返回False
print(cur_page.previous_page_number()) # 取上一頁的頁碼,如果當前是第一頁,沒有頁碼就報錯了
print(cur_page.has_next()) # 判斷是否有下頁,返回False或True
print(cur_page.next_page_number()) # 取下一頁的頁碼
print(cur_page.has_other_pages()) # 是否有其他頁,返回False或True

接下來在views.py里實現分頁的功能,首先在user下新增一個const.py文件,在里面定義一個page_size,就是每頁顯示多少條,然后取出數據庫里的全部文章,在views.py里新增的代碼如下圖:

 

分頁前端實現

接下來在前端(http://127.0.0.1:8000)頁面實現分頁,在個人博客模板<<simple>>里復制list.htmltemplates下,list.html實現了分頁的功能,於是找到分頁的代碼,把代碼復制到index.html的article標簽里,div class="r_box"的這個標簽的下面,/div>的上面,如下圖:

刷新http://127.0.0.1:8000,往下拖動滾動條,可以看到頁面,如下圖:

有點粗糙,需要稍微修改一下代碼,99要改成上一頁,1-9要進行循環,把2-9的頁碼代碼刪除,只保留1,新增的代碼如下圖:

刷新http://127.0.0.1:8000,看到分頁的效果如下圖:

因為views.pyindex函數的data中key是articles在<div class="pagelist">上面寫{% if articles.has_other_pages %},在</div>下面寫{% endif %},這個邏輯是如果有其他頁,就執行div里面的代碼,如果沒有其他頁,就不執行div里面的代碼,因為只有一頁,所以不執行div里面的代碼,刷新http://127.0.0.1:8000,分頁效果沒有了,接下來在這里進行判斷,后端的方法是有(),前端調用方法不用(),articles.paginator相當於分頁后端實現里的page_obj,新增代碼如下圖:

然后還要把const.pypage_size改成10,接下來在user下新建一個model_test.py文件,新增的代碼如下圖:

刷新http://127.0.0.1:8000,可以看到分頁的效果,如下圖:

輸入http://127.0.0.1:8000/index/?page=6下一頁按鈕消失,輸入http://127.0.0.1:8000/index/?page=1上一頁按鈕消失,邏輯實現了,但是每個頁碼都無法點擊,因為是在views.py里的index函數上實現的分頁,在首頁上可以實現分頁,但是點擊其他分類就跳到了category這個函數上,但是這個函數沒有分頁,所以要優化代碼,保證category上也能實現分頁,新增代碼如下圖:

同時在base.html里修改如下圖:

在urls.py里注釋path('category/<int:id>', category),同時刪掉導入的category,然后在model_test.py里修改代碼如下圖:

刷新article表,可以看到新增31條category_id為2的數據,這個應該分成4頁,刷新http://127.0.0.1:8000/,點擊分類導航linux,可以看到如下圖:

另一種方法也可以實現,優點是路徑變了至少前端這里代碼不用改動,如果路徑有可能會變,變成比如detail_abc,只改變urls.py里的代碼,在urls.py里寫上name='detail',固定格式name='detail',如下圖:

在index.html寫上{% url 'detail' %}代替/detail,如下圖:

刷新http://127.0.0.1:8000/,點擊任一分類,頁面正常跳轉,路徑顯示如下圖:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM