[TOC]css
前言
當用戶輸入URL時，我在前端頁面顯示的數據，假設有1萬條數據，用腦子想想不可能將這一萬條數據所有都展現在當前一個頁面上去給用戶直接看把，這樣雖而後端方便了，可是若是你是開發一個上線的項目，用戶體驗賊差，那這個項目豈不是費了，因此咱們在瀏覽別人的網站的時候，就比如博客園來講把，它是每一頁都展現那規定的幾條數據，當用戶想看其餘的數據，須要點擊其餘頁，查看其它頁的數據html
下面咱們就來看一下分頁器怎麼用前端
自定義分頁器
說明：django幫咱們封裝了分頁器的代碼方法，咱們只須要知道他怎麼用便可，下面來介紹一下它的用法python
-
首先先在應用下新建一個py文件，用來存放封裝號的分頁器代碼jquery
# mypage.py（文件名可隨意起） class Pagination(object): def __init__(self, current_page, all_count, per_page_num=2, pager_count=11): """ 封裝分頁相關數據 :param current_page: 當前頁 :param all_count: 數據庫中的數據總條數 :param per_page_num: 每頁顯示的數據條數,能夠本身改 :param pager_count: 最多顯示的頁碼個數 用法: queryset = model.objects.all() page_obj = Pagination(current_page,all_count) page_data = queryset[page_obj.start:page_obj.end] 獲取數據用page_data而再也不使用原始的queryset 獲取前端分頁樣式用page_obj.page_html """ try: current_page = int(current_page) except Exception as e: current_page = 1 if current_page < 1: current_page = 1 self.current_page = current_page self.all_count = all_count self.per_page_num = per_page_num # 總頁碼 all_pager, tmp = divmod(all_count, per_page_num) if tmp: all_pager += 1 self.all_pager = all_pager self.pager_count = pager_count self.pager_count_half = int((pager_count - 1) / 2) @property def start(self): return (self.current_page - 1) * self.per_page_num @property def end(self): return self.current_page * self.per_page_num def page_html(self): # 若是總頁碼 < 11個： if self.all_pager <= self.pager_count: pager_start = 1 pager_end = self.all_pager + 1 # 總頁碼 > 11 else: # 當前頁若是<=頁面上最多顯示11/2個頁碼 if self.current_page <= self.pager_count_half: pager_start = 1 pager_end = self.pager_count + 1 # 當前頁大於5 else: # 頁碼翻到最後 if (self.current_page + self.pager_count_half) > self.all_pager: pager_end = self.all_pager + 1 pager_start = self.all_pager - self.pager_count + 1 else: pager_start = self.current_page - self.pager_count_half pager_end = self.current_page + self.pager_count_half + 1 page_html_list = [] # 添加前面的nav和ul標籤 page_html_list.append(''' <nav aria-label='Page navigation>' <ul class='pagination'> ''') first_page = '<li><a href="?page=%s">首頁</a></li>' % (1) page_html_list.append(first_page) if self.current_page <= 1: prev_page = '<li class="disabled"><a href="#">上一頁</a></li>' else: prev_page = '<li><a href="?page=%s">上一頁</a></li>' % (self.current_page - 1,) page_html_list.append(prev_page) for i in range(pager_start, pager_end): if i == self.current_page: temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,) else: temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,) page_html_list.append(temp) if self.current_page >= self.all_pager: next_page = '<li class="disabled"><a href="#">下一頁</a></li>' else: next_page = '<li><a href="?page=%s">下一頁</a></li>' % (self.current_page + 1,) page_html_list.append(next_page) last_page = '<li><a href="?page=%s">尾頁</a></li>' % (self.all_pager,) page_html_list.append(last_page) # 尾部添加標籤 page_html_list.append(''' </nav> </ul> ''') return ''.join(page_html_list) -
使用封裝好的分頁器代碼--在views.py中，後端如何使用數據庫
from app01 import mypage def page(request): # 1.先從數據庫中將數據所有查出來 info_obj_list = models.Info.objects.all() #2. 獲取當前url中的參數，也就是用戶訪問的是那一也數據，當前頁的獲取 current_page = request.GET.get('page',1) # 若是沒有當前頁，默認是第一頁 #3. 獲取數據庫中一共有多少條數據 all_count = info_obj_list.count() #4. 實例化產生一個對象（是咱們上面mypage.py文件中的Pagination類的對象） # 實例化對象的時候，須要將當前頁和數據的總數傳給這個類，類會自動調用__init__方法 # def __init__(self, current_page, all_count, per_page_num=2, pager_count=11): page_obj = mypage.Pagination(current_page=current_page,all_count=all_count) #5. 對真實的數據進行切片操做 page_queryset = info_obj_list[page_obj.start:page_obj.end] # 注意前端接收的切片以後的數據 return render(request,'page.html',locals()) -
前端頁面-----接收後端進行切片操做以後的數據django
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1 "> <title>Title</title> </head> <body> {% for page_obj in page_queryset %} <p>{{ page_obj.name }}</p> {% endfor %} //這裏必定不要忘了將，後端傳過來的切片以後的數據進行一個轉義操做，不然不會顯示分頁器 {{ page_obj.page_html|safe}} </body> </html>