一、概述
有一個django項目,由於業務要求,自己構造了一個list數據類型。這是一個臨時數據,不需要保存到表中,但是需要分頁展示。
由於之前學習的Django的分頁器(paginator),參考鏈接:
https://www.cnblogs.com/xiao987334176/p/9285629.html
它是針對於queryset類型做的分頁,那么list類型是否也可以呢?答案是可以的!
二、項目測試
新建項目paging_demo
本文使用的django版本為2.x系列
paging_demo/urls.py

from django.contrib import admin from django.urls import path from application import views urlpatterns = [ path('admin/', admin.site.urls), path('', views.index), ]
paging_demo/settings.py ,最后一行增加
# 每一頁顯示幾條 PAGE_SIZE = 10 # 分頁數 PAGE_NUM_PAGES = 11
application/views.py

from django.shortcuts import render from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger from paging_demo import settings # Create your views here. def index(request): """ 首頁 :param request: :return: """ host_list = [] for i in range(100): dic = {"id":i,"ip":"192.168.1.%s"%i} host_list.append(dic) # 分頁 paginator = Paginator(host_list, settings.PAGE_SIZE) # 每頁顯示指定的條數 # 異常判斷 try: # 當前頁碼,如果取不到page參數,默認為1 current_num = int(request.GET.get("page", 1)) # 當前頁碼 host_list = paginator.page(current_num) # 獲取當前頁碼的數據 except EmptyPage: # 頁碼不存在時,報EmptyPage錯誤 log_list = paginator.page(1) # 強制更新為第一頁 # 如果頁數十分多時,換另外一種顯示方式 if paginator.num_pages > settings.PAGE_NUM_PAGES: # 一般網頁展示11頁,左5頁,右5頁,加上當前頁,共11頁 if current_num - 5 < 1: # 如果前5頁小於1時 pageRange = range(1, settings.PAGE_NUM_PAGES) # 頁碼的列表:范圍是初始狀態 elif current_num + 5 > paginator.num_pages: # 如果后5頁大於總頁數時 # 頁碼的列表:范圍是(當前頁-5,總頁數+1)。因為range顧頭不顧尾,需要加1 pageRange = range(current_num - 5, paginator.num_pages + 1) else: # 頁碼的列表:后5頁正常時,頁碼范圍是(當前頁-5,當前頁+6)。注意不是+5,因為range顧頭不顧尾! pageRange = range(current_num - 5, current_num + 6) else: pageRange = paginator.page_range # 頁碼的列表 data = { "paginator": paginator, "current_num": current_num, "pageRange": pageRange, "host_list": host_list } return render(request, "index.html", data)
templates/index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-success"> <!-- Default panel contents --> <div class="panel-heading text-center"> <span>主機列表</span> </div> <!-- Table --> <table class="table table-bordered"> <thead> <tr> <th>序號</th> <th>ip地址</th> {# <th>操作</th>#} </tr> </thead> <tbody> {% for item in host_list %} <tr> <th> <span>{{ forloop.counter }}</span> </th> <td>{{ item.ip }}</td> </tr> {% endfor %} </tbody> </table> </div> {#分頁展示#} <nav aria-label="Page navigation"> <ul class="pagination"> <li><a href="?page=1" aria-label="Previous"><span aria-hidden="true">首頁</span></a></li> {#has_previous 判斷是否有上一頁#} {% if host_list.has_previous %} {#previous_page_number 上一頁的頁碼#} <li><a href="?page={{ host_list.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li> {% else %} {#class="disabled" 禁止用戶點擊#} <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li> {% endif %} {#遍歷頁碼的列表#} {% for i in pageRange %} {#判斷當前頁碼數等於底部頁碼時#} {% if current_num == i %} {#增加class,加深按鈕#} <li class="active"><a href="?page={{ i }}">{{ i }}</a></li> {% else %} {#href參數為簡寫,它會自動獲取當前路徑,並拼接參數#} <li><a href="?page={{ i }}">{{ i }}</a></li> {% endif %} {% endfor %} {#has_next 判斷是否有下一頁#} {% if host_list.has_next %} {#next_page_number 下一頁的頁碼#} <li><a href="?page={{ host_list.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li> {% else %} {#class="disabled" 禁止用戶點擊#} <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li> {% endif %} <li><a href="?page={{ paginator.num_pages }}" aria-label="Next"><span aria-hidden="true">最后一頁</span></a> </li> </ul> </nav> </div> </div> </body> </html>
運行項目,訪問頁面:
http://127.0.0.1:8000/
效果如下: