目錄
1.方案介紹
1.1實現效果
1.2django.core.paginator
Paginator 類:
Page 類:
EmptyPage 和 PageNotAnInteger 異常:
2.方案步驟
2.1創建一個common app
2.2創建plugins/_pagination.html
2.3 其他app的views.py查詢方法
2.4在AIRecords.html里使用分頁
1.方案介紹
1.1實現效果
實現方案中使用到：
1.2django.core.paginator
????????django.core.paginator 是 Django 框架中的一個模塊，用于實現數據分頁功能。這個模塊提供了幾個關鍵類和方法，幫助開發者輕松地在視圖中對查詢結果進行分頁處理，從而在前端展示時能夠更加高效和用戶友好。下面是 django.core.paginator 中主要組件的簡介：
-
Paginator 類:
用途: 主要用于將查詢結果集分割成多頁。
參數:
object_list: 需要分頁的對象列表，通常是數據庫查詢的結果。
per_page: 每頁顯示的對象數量，默認為10。
方法:
.count: 返回總對象數。
.num_pages: 返回總頁數。
.page(number): 返回指定頁號的 Page 對象。
.page_range: 返回一個表示所有頁號的范圍對象。
-
Page 類:
????????用途: 表示分頁后的單頁數據，包含當前頁的數據列表和一些分頁信息。
????????屬性:
????????????????number: 當前頁的頁碼。
????????????????object_list: 當前頁的數據列表。
????????????????has_next: 是否有下一頁。
????????????????has_previous: 是否有上一頁。
????????????????next_page_number: 下一頁的頁碼，如果沒有則為None。
????????????????previous_page_number: 上一頁的頁碼，如果沒有則為None。
????????方法:
????????????????.start_index(): 返回當前頁第一條記錄的索引位置（從1開始）。
????????????????.end_index(): 返回當前頁最后一條記錄的索引位置（從1開始）。
-
EmptyPage 和 PageNotAnInteger 異常:
????????當請求的頁碼無效時，如請求的頁碼不是一個整數或超過了實際的頁數，Paginator 在調用 .page() 方法時會拋出這些異常。
1.3 templatetags
?????????在Django中，templatetags 是一個特殊的目錄，位于應用的目錄下，用于存放自定義的模板標簽和過濾器。通過自定義模板標簽和過濾器，開發者可以擴展Django模板系統的功能，使其更加靈活和強大。
2.方案步驟
2.1創建一個common app
考慮到分頁是一個通用的功能，所以創建了一個common app。
在此common app下創建文件夾 templatetags
在templatetags下創建general_tags.py
代碼如下：
from django import templateregister = template.Library()@register.inclusion_tag('plugins/_pagination.html', takes_context=True)
def show_pagination(context):print(context)return {'page_objects':context.dicts[3]['aiRecords'],'search':'','orderby':'',}
-
'page_objects':context.dicts[3]['aiRecords'],//這句冒號后面的部分，需要根據查詢數據的views里的代碼具體的更改，后面會寫到views.py里的代碼。
-
'search':'',//這句準備在頁面跳轉時，帶著搜索條件，可以刪減
-
'orderby':''//這句準備在頁面跳轉時，帶著排序字段，可以刪減
2.2創建plugins/_pagination.html
????????在template目錄創建文件夾plugins
????????在plugins下創建_pagination.html
<ul class="pagination m-auto">{% if page_objects.has_previous %}<li class="page-item "><a href="?page=1&orderby={{ orderby }}&search={{ search }}"><span class="page-link"><i class="fa fa-chevron-left" aria-hidden="true"></i> 首頁</span></a></li>{% else %}<li class="page-item disabled"><a href=""><span class="page-link">首頁</span></a></li>{% endif %}{% if page_objects.number|add:'-4' > 1 %}<li class ="page-item"><a class="page-link" href="?page={{ page_objects.number|add:'-5' }}&orderby={{ orderby }}&search={{ search }}">…</a></li>{% endif %}{% for i in page_objects.paginator.page_range %}{% if page_objects.number == i %}<li class="page-item active"><a class="page-link" href=""> {{i}}</a></li>{% elif i > page_objects.number|add:'-5' and i < page_objects.number|add:'5' %}<li class ="page-item" ><a class="page-link" href="?page={{ i }}&orderby={{ orderby }}&search={{ search }}">{{ i }}</a></li>{% endif %}{% endfor %}{% if page_objects.paginator.num_pages > page_objects.number|add:'4' %}<li class ="page-item"><a class="page-link" href="?page={{ page_objects.number|add:'5' }}&orderby={{ orderby }}&search={{ search }}">…</a></li>{% endif %}{% if page_objects.has_next %}<li class ="page-item" ><a class="page-link" href="?page={{ page_objects.paginator.num_pages }}&orderby={{ order }}&search={{ search }}">尾頁 <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>{% else %}<li class="page-item disabled"><a href=""><span class="page-link">尾頁</span></a></li>{% endif %}</ul>2.3 其他app的views.py查詢方法
看注釋就好
from django.shortcuts import render
from django.shortcuts import render, redirect
from aivrs import models
from django.core.paginator import Paginator# Create your views here.
# 定義每頁顯示的記錄數
PAGINATOR_NUMBER = 2
def AIRecords(request):"""處理AI記錄的列表頁面請求。參數:- request: Django的HttpRequest對象，包含請求的信息。返回:- 返回一個渲染后的AI記錄列表頁面。"""# 獲取所有AI記錄并按ID排序aiRecords = models.AIRecords.objects.all().order_by('id')# 計算記錄總數count_total = aiRecords.count()# 初始化分頁器，每頁顯示PAGINATOR_NUMBER條記錄paginator = Paginator(aiRecords, PAGINATOR_NUMBER)# 從請求中獲取當前頁碼page = request.GET.get('page')# 如果頁碼不存在，則默認為第1頁if page is None:page = 1# 獲取指定頁碼的記錄aiRecords = paginator.get_page(page)# 渲染并返回AI記錄列表頁面return render(request, 'AIRecords.html', {'aiRecords': aiRecords})2.4在AIRecords.html里使用分頁
-
{% load general_tags %}
????????這一行代碼是Django模板語言中的標簽，用于在模板文件中加載自定義的模板標簽庫。general_tags是你自定義的標簽庫名稱，意味著在這個模板文件中，你可以使用general_tags庫中定義的所有自定義模板標簽和過濾器。
-
{% show_pagination %}
????????在Django模板中，{% show_pagination %}這一行代碼是一個自定義模板標簽的用法。這個標簽是之前通過{% load general_tags %}加載的general_tags庫中定義的一個標簽，用于展示分頁導航。?
具體代碼如下：
{% extends "layouts/base.html" %}
{% load general_tags %}{% block title %} Management {% endblock %} <!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}{% block content %}<div class="pcoded-content"><div class="pcoded-inner-content"><div class="page-header"><div class="page-block"><div class="row align-items-center"><div class="col-md-12"><div class="page-header-title"><h5 class="m-b-10">AIRecords Management</h5></div></div></div></div></div><!-- [ breadcrumb ] end --><div class="main-body"><div class="page-wrapper"><!-- [ Main Content ] start --><div class="row"><!-- [ basic-table ] start --><div class="col-xl-12"><div class="card"><div class="card-header"><h5>Total {{aiRecords.paginator.count}} records</h5></div><div class="card-block"><div class='row'><div class="col-4"><form class="form-inline mb-2"><div class="form-group mx-sm-3 mb-2"><input type="text" class="form-control" name="search",id='search',placeholder="Search title / author",value={{search}}></div><button type="submit" class="btn btn-secondary mb-2 btn-sm">Search</button></form></div></div><div class="table-responsive "><table class="table table-striped"><thead><tr><th>#</th><th>Ext ID</th><th>Image Name</th><th>Image Path</th><th>Image Url</th><th>OCR Status</th><th>OCR Message</th><th>OCR Time</th><th>Location</th><th>extServiceSystem</th><th>serviceName</th><th>serviceAccessedStatus</th><th>serviceAccessedMessage</th><th>serviceAccessedTime</th><th>Operation</th></tr></thead><tbody>{% for airecord in aiRecords %}<tr><th scope="row">{{airecord.id}}</th><td>{{airecord.extId}}</td><td>{{airecord.imageName}}</td><td>{{airecord.imagePath}}</td><td>{{airecord.imageUrl}}</td><td>{{airecord.ocrStatus}} </td><td>{{airecord.ocrMessage}} </td><td>{{airecord.ocrTime|date:"Y/m/d H:i" }}</td><td>{{airecord.ocrLocation}}</td><td>{{airecord.extServiceSystem}}</td><td>{{airecord.serviceName}}</td><td>{{airecord.serviceAccessedStatus}} </td><td>{{airecord.serviceAccessedMessage}} </td><td>{{airecord.serviceAccessedTime|date:"Y/m/d H:i" }}</td><td>
{# <a href="{% url 'book_detail' airecord.id%}" class="badge badge-warning"><i class="feather icon-eye"></i></a>#}
{# <a href="{% url 'book_update' airecord.id%}" class="badge badge-info"><i class="feather icon-edit"></i> Update</a> #}
{# <a href="{% url 'book_delete' airecord.id%}" class="badge badge-danger"><i class="feather icon-trash-2"></i> Delete</a> #}</td></tr>{% endfor %}</tbody></table></div><div class="row"><div class='col-4'>
{# <a href="{% url 'book_create' %}" class='btn btn-primary'>Add book</a>#}</div><div class='col-8'>{% show_pagination %}</div></div></div></div></div></div></div></div></div>
</div>{% endblock content %}{% block javascripts %}{% endblock javascripts %}
