1.安装dj-pagination
pip install dj-pagination
2.配置setting文件
- 打开django项目的配置文件。在INSTALLED_APPS加入此应用。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
'dj_pagination',
]
- MIDDLEWARE 安装分页中间件。您的设置文件如下所示：
MIDDLEWARE = [
...
'dj_pagination.middleware.PaginationMiddleware',
]
- 在TEMPLATES中添加请求上下文处理器。
[
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
...
'django.template.context_processors.request',
'django.template.context_processors.debug',
'django.template.context_processors.i18n',
'django.template.context_processors.media',
'django.contrib.auth.context_processors.auth',
],
},
},
]
3.配置模板
在你需要添加分页的模板文件的顶部加载标签pagination_tags
{% extends 'base.html' %}
{% load pagination_tags %}
...
找到你想要进行分页的模型列表，并在迭代之前在该变量上使用autopaginate标签。（使用规范post_list作为示例变量）：
...
{% autopaginate post_list %}
{# 在迭代post前加入{% autopaginate object_list %} #}
{# 可以控制每页的数量，在object_list后面填写要每页文章的数量 默认20 #}
{# 如 ：{% autopaginate post_list 10 %} #}
{% for post in post_list %}
...
{% endfor %}
...
完成后在您想要显示分页的位置，加入paginate标签：
{ ％ paginate ％}
运行你的项目。打开页面可以看到分页。
4.自定义分页模板
dj-pagination的默认模板很简陋我们希望用bootstrap4的分页样式来美化一下。需要引入bootstrap4的样式文件。我们使用cdn,复制下面代码粘贴到你的head中。
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
找到dj-pagination的模板文件。在你的python包目录下的dj_pagination\templates\pagination\pagination.html
备份默认模板。
打开pagination.html，修改为如下代码：
{% if is_paginated %}
{% load i18n %}
<nav aria-label="Page navigation example">
<ul class="pagination">
{% block previouslink %}
{% if page_obj.has_previous %}
{% if disable_link_for_first_page and page_obj.previous_page_number == 1 %}
<li class="page-item"><a href="{{ request.path }}{% if getvars %}?{{ getvars|slice:"1:" }}{% endif %}" class="prev page-link">{{ previous_link_decorator|safe }}{% trans "" %}</a></li>
{% else %}
<li class="page-item"><a href="?page{{ page_suffix }}={{ page_obj.previous_page_number }}{{ getvars }}" class="prev page-link">{{ previous_link_decorator|safe }}{% trans "" %}</a></li>
{% endif %}
{% else %}
{% if display_disabled_previous_link %}
<li class="page-item"><span class="disabled prev page-link">{{ previous_link_decorator|safe }}{% trans "previous" %}</span></li>
{% endif %}
{% endif %}
{% endblock previouslink %}
{% block pagelinks %}
{% if display_page_links %}
{% for page in pages %}
{% if page %}
{% ifequal page page_obj.number %}
<li class="page-item active"><a class="current page page-link ">{{ page }}<span class="sr-only">(current)</span></a></li>
{% else %}
{% if disable_link_for_first_page and page == 1 %}
<li class="page-item"><a href="{{ request.path }}{% if getvars %}?{{ getvars|slice:"1:" }}{% endif %}" class="page page-link">{{ page }}</a></li>
{% else %}
<li class="page-item"><a href="?page{{ page_suffix }}={{ page }}{{ getvars }}" class="page page-link">{{ page }}</a></li>
{% endif %}
{% endifequal %}
{% else %}
<li class="page-item">...</li>
{% endif %}
{% endfor %}
{% endif %}
{% endblock pagelinks %}
{% block nextlink %}
{% if page_obj.has_next %}
<li class="page-item"><a href="?page{{ page_suffix }}={{ page_obj.next_page_number }}{{ getvars }}" class="next page-link">{% trans "" %}{{ next_link_decorator|safe }}</a></li>
{% else %}
{% if display_disabled_next_link %}
<li class="page-item"><span class="disabled next page-link">{% trans "" %}{{ next_link_decorator|safe }}</span></li>
{% endif %}
{% endif %}
{% endblock nextlink %}
</ul>
</nav>
{% endif %}
完毕！再次刷新网页，分页就美观了。
完美分页图
网友评论