原来是基于函数视图分页的,现在改为类视图分页,之前的操作请参考Django分页(一)基于函数视图分页
1、重写views.py
views.py
from django.shortcuts import render
from django.views.generic import ListView
from .models import StudyMsg
# 基于类视图分页
class ScoreView(ListView):
model = StudyMsg
template_name = "score_display.html"
context_object_name = "all_scores"
paginate_by = 20 #指定每页20个数据
2、配置urls.py
urls.py
from django.contrib import admin
from django.urls import path
from page_test import views
urlpatterns = [
path('admin/', admin.site.urls),
path('score/', views.ScoreView.as_view(), name="score_dis"),
]
3、重写前端score_display.html
基于类视图分类提供以下变量使用:
1、paginator:和(一)Paginator的实例一样
2、page_obj:当前的page对象
3、is_paginated:和之前的has_other_pages一样
4、object_list:等同于context_object_name
score_display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Score</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>成绩表</caption>
<thead>
<tr>
<th>名字</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
</tr>
</thead>
<tbody>
{% for score in all_scores %}
<tr>
<td>{{ score.name }}</td>
<td>{{ score.chinese }}</td>
<td>{{ score.math }}</td>
<td>{{ score.english }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!--
{% if all_scores.has_other_pages %}
<nav aria-label="Score pagination" class="mb-4">
<ul class="pagination">
{% if all_scores.has_previous%}
<li class="page-item">
<a class="page-link" href="?page={{ all_scores.previous_page_number }}">上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">上一页</span>
</li>
{% endif %}
{% for page_num in all_scores.paginator.page_range %}
{% if all_scores.number == page_num %}
<li class="page-item active">
<span class="page-link">
{{ page_num }}
<span class="sr-only">(current)</span>
</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% endif %}
{% endfor %}
{% if all_scores.has_next %}
<li class="page-item">
<a class="page-link" href="?p={{ all_scores.next_page_number }}">下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">下一页</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
-->
{% if is_paginated %}
<nav aria-label="Score pagination" class="mb-4">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">上一页</span>
</li>
{% endif %}
{% for page_num in paginator.page_range %}
{% if page_obj.number == page_num %}
<li class="page-item active">
<span class="page-link">
{{ page_num }}
<span class="sr-only">(current)</span>
</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">下一页</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
</body>
</html>
4、再修改score_display.html
当数据量过大时,上面这样写就有很大问题了。
页码数量过多。因此我们需要修改
(1)、第一页和最后一页必须存在
(2)、只会展示当前页的前三页和后三页
{% if is_paginated %}
<nav aria-label="Score pagination" class="mb-4">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">上一页</span>
</li>
{% endif %}
<!--首页-->
{% if page_obj.number == 1 %}
<li class="page-item active">
<span class="page-link">
{{ page_obj.number }}
<span class="sr-only">(current)</span>
</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page=1">1</a>
</li>
{% endif %}
{% for page_num in paginator.page_range %}
{% if page_num != 1 and page_num != paginator.num_pages %}
{% if page_obj.number == page_num %}
<li class="page-item active">
<span class="page-link">
{{ page_num }}
<span class="sr-only">(current)</span>
</span>
</li>
<!--向前三页-->
{% elif page_obj.number|add:-3 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% elif page_obj.number|add:-2 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% elif page_obj.number|add:-1 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
<!--向后三页-->
{% elif page_obj.number|add:3 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% elif page_obj.number|add:2 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% elif page_obj.number|add:1 == page_num %}
<li class="page-item">
<a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
<!--最后一页-->
{% if page_obj.number == paginator.num_pages %}
<li class="page-item active">
<span class="page-link">
{{ paginator.num_pages }}
<span class="sr-only">(current)</span>
</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
</li>
{% endif %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">下一页</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}