1.安裝dj-pagination
pip install dj-pagination
2.配置setting文件
- 打開django項(xiàng)目的配置文件。在INSTALLED_APPS加入此應(yīng)用叠赦。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
'dj_pagination',
]
- MIDDLEWARE 安裝分頁中間件流妻。您的設(shè)置文件如下所示：
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.配置模板
在你需要添加分頁的模板文件的頂部加載標(biāo)簽pagination_tags
{% extends 'base.html' %}
{% load pagination_tags %}
...
找到你想要進(jìn)行分頁的模型列表，并在迭代之前在該變量上使用autopaginate標(biāo)簽绅这。（使用規(guī)范post_list作為示例變量）：
...
{% autopaginate post_list %}
{# 在迭代post前加入{% autopaginate object_list %} #}
{# 可以控制每頁的數(shù)量各薇，在object_list后面填寫要每頁文章的數(shù)量 默認(rèn)20 #}
{# 如 ：{% autopaginate post_list 10 %} #}
{% for post in post_list %}
...
{% endfor %}
...
完成后在您想要顯示分頁的位置，加入paginate標(biāo)簽：
{ ％ paginate ％}
運(yùn)行你的項(xiàng)目君躺。打開頁面可以看到分頁峭判。
4.自定義分頁模板
dj-pagination的默認(rèn)模板很簡陋我們希望用bootstrap4的分頁樣式來美化一下。需要引入bootstrap4的樣式文件棕叫。我們使用cdn,復(fù)制下面代碼粘貼到你的head中林螃。
<link 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
備份默認(rèn)模板俺泣。
打開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 %}
完畢完残！再次刷新網(wǎng)頁，分頁就美觀了横漏。
完美分頁圖
