分頁后端實現
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.html到templates下,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.py里index函數的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.py里page_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/,點擊任一分類,頁面正常跳轉,路徑顯示如下圖: