python測試開發django-116.Paginator分頁器頁數大時顯示省略號...
阿新 • • 發佈：2021-09-07
前言
使用django自帶的Paginator分頁器集合bootstrap的pagination控制元件可以實現分頁功能，
如果頁數較大的時候，希望能顯示省略號+當前頁，這樣看起來更美觀一點。
自定義分頁功能
自定義一個分頁功能，當分頁導航欄數量很多時，多的頁碼顯示省略號...,傳3個引數
- paginator Paginator分頁器例項物件
- page Page類例項物件，paginator.page(頁碼數)獲取
- is_paginated=True 是否需要顯示分頁導航欄
def pagination_function(paginator, page, is_paginated=True): if not is_paginated: # 如果沒有分頁，則無需顯示分頁導航條，不用任何分頁導航條的資料，因此返回一個空的字典 return {} # 當前頁左邊連續的頁碼號，初始值為空 left = [] # 當前頁右邊連續的頁碼號，初始值為空 right = [] # 標示第 1 頁頁碼後是否需要顯示省略號 left_has_more = False # 標示最後一頁頁碼前是否需要顯示省略號 right_has_more = False # 標示是否需要顯示第 1 頁的頁碼號。 # 因為如果當前頁左邊的連續頁碼號中已經含有第 1 頁的頁碼號，此時就無需再顯示第 1 頁的頁碼號， # 其它情況下第一頁的頁碼是始終需要顯示的。 # 初始值為 False first = False # 標示是否需要顯示最後一頁的頁碼號。 # 需要此指示變數的理由和上面相同。 last = False # 獲得使用者當前請求的頁碼號 page_number = page.number # 獲得分頁後的總頁數 total_pages = paginator.num_pages # 獲得整個分頁頁碼列表，比如分了四頁，那麼就是 [1, 2, 3, 4] page_range = paginator.page_range if page_number == 1: # 如果使用者請求的是第一頁的資料，那麼當前頁左邊的不需要資料，因此 left=[]（已預設為空）。 # 此時只要獲取當前頁右邊的連續頁碼號， # 比如分頁頁碼列表是 [1, 2, 3, 4]，那麼獲取的就是 right = [2, 3]。 # 注意這裡只獲取了當前頁碼後連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。 right = page_range[page_number:page_number + 2] # 如果最右邊的頁碼號比最後一頁的頁碼號減去 1 還要小， # 說明最右邊的頁碼號和最後一頁的頁碼號之間還有其它頁碼，因此需要顯示省略號，通過 right_has_more 來指示。 if right[-1] < total_pages - 1: right_has_more = True # 如果最右邊的頁碼號比最後一頁的頁碼號小，說明當前頁右邊的連續頁碼號中不包含最後一頁的頁碼 # 所以需要顯示最後一頁的頁碼號，通過 last 來指示 if right[-1] < total_pages: last = True elif page_number == total_pages: # 如果使用者請求的是最後一頁的資料，那麼當前頁右邊就不需要資料，因此 right=[]（已預設為空）， # 此時只要獲取當前頁左邊的連續頁碼號。 # 比如分頁頁碼列表是 [1, 2, 3, 4]，那麼獲取的就是 left = [2, 3] # 這裡只獲取了當前頁碼後連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。 left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1] # 如果最左邊的頁碼號比第 2 頁頁碼號還大， # 說明最左邊的頁碼號和第 1 頁的頁碼號之間還有其它頁碼，因此需要顯示省略號，通過 left_has_more 來指示。 if left[0] > 2: left_has_more = True # 如果最左邊的頁碼號比第 1 頁的頁碼號大，說明當前頁左邊的連續頁碼號中不包含第一頁的頁碼， # 所以需要顯示第一頁的頁碼號，通過 first 來指示 if left[0] > 1: first = True else: # 使用者請求的既不是最後一頁，也不是第 1 頁，則需要獲取當前頁左右兩邊的連續頁碼號， # 這裡只獲取了當前頁碼前後連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。 left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1] right = page_range[page_number:page_number + 2] # 是否需要顯示最後一頁和最後一頁前的省略號 if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True # 是否需要顯示第 1 頁和第 1 頁後的省略號 if left[0] > 2: left_has_more = True if left[0] > 1: first = True data = { 'left': left, 'right': right, 'left_has_more': left_has_more, 'right_has_more': right_has_more, 'first': first, 'last': last, } return data
參考部落格https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/
檢視函式
檢視函式返回模板所需要的物件
# 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage def teachersViewP(request): teachers = Teacher.objects.all() paginator = Paginator(teachers, per_page=10) page_num = request.GET.get('page', 1) try: page_num = int(page_num) except: page_num = 1 if page_num<1 or page_num>paginator.num_pages: page_num = 1 is_paginated = True page_object = paginator.get_page(page_num) data = pagination_function(paginator, page_object, is_paginated) return render(request, 'teacher.html', locals())
模板實現
模板結合bootstrap框架實現前端分頁展示
# 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 分頁的狀態</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>分頁器載入table表格</h3> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>電話</th> </tr> </thead> <tbody> {% for field in page_object %} <tr> <td>{{ field.name }}</td> <td>{{ field.age }}</td> <td>{{ field.tel }}</td> </tr> {% endfor %} </tbody> </table> {% if is_paginated %} <ul class="pagination pull-right"> {% endif %} {#上一頁按鈕開始#} {# 如果當前頁有上一頁#} {% if page_object.has_previous %} {# 當前頁的上一頁按鈕正常使用#} <li class="previous"><a href="?page={{ page_object.previous_page_number }}">上一頁</a></li> {% else %} {# 當前頁的不存在上一頁時,上一頁的按鈕不可用#} <li class="previous disabled"><a href="#">上一頁</a></li> {% endif %} {#上一頁按鈕結束#} {% if data.first %} <li class="page"><a href="?page=1">1</a></li> {% endif %} {% if data.left %} {% if data.left_has_more %} <li class="page"><a href="javascript:void(0)">...</a></li> {% endif %} {% for i in data.left %} <li class="page"><a href="?page={{ i }}">{{ i }}</a></li> {% endfor %} {% endif %} <li class="page active" ><a href="javascript:void(0)"> {{ page_num }}</a></li> {% if data.right %} {% for i in data.right %} <li class="page"><a href="?page={{ i }}">{{ i }}</a></li> {% endfor %} {% if data.right_has_more %} <li class="page"><a href="javascript:void(0)">...</a></li> {% endif %} {% endif %} {% if data.last %} <li class="page"><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a> </li> {% endif %} {% if page_object.has_next %} <li class="next"><a href="?page={{ page_object.next_page_number }}">下一頁</a></li> {% else %} <li class="next disabled"><a href="#">下一頁</a></li> {% endif %} {# 下一頁按鈕結束#} </ul> </div> </body> </html>
實現效果
頁碼效果展示
中間頁碼顯示省略號