在 通过 Django Pagination 实现简单分页 中,我们实现了一个简单的分页导航。但效果有点差强人意,我们只能点上一页和下一页的按钮进行翻页。比较完善的分页效果应该像下面这样,但想实现这样一种效果,Django Pagination 内置的 API 已无能为力。接下来我们将通过拓展 Django Pagination 来实现下图这样比较完善的分页效果。
一个比较完善的分页效果应该具有以下特性,就像上图展示的那样,很多网站都采用了类似这种的分页导航方式。
如果需要自己来实现分页效果,我们会怎么做呢?先来分析一下导航条的组成部分,可以看到整个分页导航条其实可以分成 七个部分:
因此我们的思路是,在视图中依据上述规则生成页码列表,然后在模板中循环显示页码列表就可以了。有了思路,实现起来其实也并不很难。不过对于这类常见需求,别人早就帮我们实现好了,本着不重复造轮子的原则,直接拿来用就好。
我们第一次开始接触 django 第三方拓展,在此之前我们一直都基于 django 本身我们提供的功能在开发,然而 django 强大的地方就在于海量的第三方应用供我们挑选,几乎大部分 web 开发中的需求,django 都能找到他人已经写好的第三方应用,拿来即用。
事实上,正确的 django 开发姿势应该是这样的:
以我们的分页功能举例:
首先我们上面分析了分页需求的实现。然后我在 GitHub 上通过 django pagination 关键词进行搜索,在比较了多个 star 数比较高的项目后,发现 django-pure-pagination 文档最清晰,使用最简单,因此决定将这个应用集成到我们的博客来。值得一提的是,尽管这个应用显示作者最后一次更新代码在 4 年前,但我粗略浏览了一下源码,发现其依赖的 django api 4 年来异常稳定,所以确保能在 django 2.2 中使用。
接下来我们就来使用它,首先安装它:
$ pipenv install django-pure-pagination
然后将它注册到 INSTALLED_APPS
里:
INSTALLED_APPS = [ # ... 'pure_pagination', # 分页 'blog.apps.BlogConfig', # 注册 blog 应用 'comments.apps.CommentsConfig', # 注册 comments 应用 ]
修改一下 IndexView
,让它继承 django-pure-pagination 提供的 PaginationMixin
,这个混入类将为我们提供上述提到的分页功能。
class IndexView(PaginationMixin, ListView): model = Post template_name = 'blog/index.html' context_object_name = 'post_list' paginate_by = 10
然后我们可以在 common.py 配置中配置一下分页的效果,这是 django-pure-pagination 提供的配置项,用于个性化配置分页效果:
# django-pure-pagination 分页设置 PAGINATION_SETTINGS = { 'PAGE_RANGE_DISPLAYED': 4, # 分页条当前页前后应该显示的总页数(两边均匀分布,因此要设置为偶数), 'MARGIN_PAGES_DISPLAYED': 2, # 分页条开头和结尾显示的页数 'SHOW_FIRST_PAGE_WHEN_INVALID': True, # 当请求了不存在页,显示第一页 }
在模板中需要分页的地方,调用分页对象的 render 方法就可以了,比如在 index.html 中:
{% if is_paginated %} {{ page_obj.render }} {% endif %}
注意这里 page_obj 是分页后的对象列表,具体请参考上一篇文章的讲解。render 方法会自动帮我们渲染一个预先定义好的分页条,至此,分页功能就完成了。
有时候预定义的分页条并不能满足我们的需求,我们可以通过自定义的模板来覆盖预定义的模板。django 查找模板的顺序是,首先在项目配置的模板根路径寻找(我们项目中配的是 templates 文件夹),没有找到的话,再去应用的 templates 目录下寻找。分页模板预定义的路径为 pure_pagination/pagination.html,所以我们可以在项目模板根路径下建立一个一模一样的文件结构,这样 django 就会首先找到我们的模板,从而应用我们自定义的模板,而不是预定义的模板。
在 templates 目录下新建一个 pure_pagination 目录,然后建立一个 pagination.html 文件。
接下来便是在模板中设置分页导航了,将导航条的七个部分的数据一一展现即可,示例代码如下:
<div class="text-center pagination" style="width: 100%"> <ul> {% if page_obj.has_previous %} <li><a href="?{{ page_obj.previous_page_number.querystring }}" class="prev">‹‹ </a></li> {% else %} <li><span class="disabled prev">‹‹ </span></li> {% endif %} {% for page in page_obj.pages %} {% if page %} {% ifequal page page_obj.number %} <li class="current"><a href="#">{{ page }}</a></li> {% else %} <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li> {% endifequal %} {% else %} ... {% endif %} {% endfor %} {% if page_obj.has_next %} <li><a href="?{{ page_obj.next_page_number.querystring }}" class="next"> ››</a> </li> {% else %} <li><span class="disabled next"> ››</span></li> {% endif %} </ul> </div>
多添加几篇文章,在示例中就可以看到分页效果了。要使分页导航更加美观,通过设置其 CSS 样式即可。