Django入门与实践-第23章：分页实现

我们可以非常容易地使用 CBV 来实现分页功能。但首先我想手工分页，这样就更有助于我们理解背后的机制，这样它就不那么神秘了。

实际上对 boards 列表视图分页并没有意义，因为我们不期望有很多 boards。但无疑对于主题列表和帖子列表来说是需要一些分页的。

从现在起，我们将在 board_topics 这个视图中来操作。

首先，我们添加一些帖子。我们可以直接使用应用程序的用户界面来添加几个帖子，或者打开 python shell 编写一个小脚本来为我们完成：

  1. python manage.py shell
  1. from django.contrib.auth.models import User
  2. from boards.models import Board, Topic, Post
  4. user = User.objects.first()
  6. board = Board.objects.get(name='Django')
  8. for i in range(100):
  9.     subject = 'Topic test #{}'.format(i)
  10.     topic = Topic.objects.create(subject=subject, board=board, starter=user)
  11.     Post.objects.create(message='Lorem ipsum...', topic=topic, created_by=user)

Django入门与实践-第23章：分页实现 - 图1

很好，现在我们有一些数据可以玩了。

在我们返回去写代码之前，让我们用 python shell 来做一些更多的实验：

  1. python manage.py shell
  1. from boards.models import Topic
  3. # All the topics in the app
  4. Topic.objects.count()
  5. 107
  7. # Just the topics in the Django board
  8. Topic.objects.filter(board__name='Django').count()
  9. 104
  11. # Let's save this queryset into a variable to paginate it
  12. queryset = Topic.objects.filter(board__name='Django').order_by('-last_updated')

定义一个你要分页的查询集(QuerySet)的排序是很重要的。否则，会返回给你错误的结果。

现在让我们导入 Paginator 工具：

  1. from django.core.paginator import Paginator
  3. paginator = Paginator(queryset, 20)

这里我们告诉Django将查询集按照每页20个元素分页。现在让我们来研究一些 paginator 的属性：

  1. # count the number of elements in the paginator
  2. paginator.count
  3. 104
  5. # total number of pages
  6. # 104 elements, paginating 20 per page gives you 6 pages
  7. # where the last page will have only 4 elements
  8. paginator.num_pages
  9. 6
  11. # range of pages that can be used to iterate and create the
  12. # links to the pages in the template
  13. paginator.page_range
  14. range(1, 7)
  16. # returns a Page instance
  17. paginator.page(2)
  18. <Page 2 of 6>
  20. page = paginator.page(2)
  22. type(page)
  23. django.core.paginator.Page
  25. type(paginator)
  26. django.core.paginator.Paginator

这里我们必须注意，因为如果我们试图找到一个不存在的页面，分页器会抛出一个异常:

  1. paginator.page(7)
  2. EmptyPage: That page contains no results

或者如果我们随意传递进去一个不是页码数字的参数，也会报错：

  1. paginator.page('abc')
  2. PageNotAnInteger: That page number is not an integer

我们必须在设计用户界面时牢记这些细节。

我们来简单看一下 Page 类提供的属性和方法：

  1. page = paginator.page(1)
  3. # Check if there is another page after this one
  4. page.has_next()
  5. True
  7. # If there is no previous page, that means this one is the first page
  8. page.has_previous()
  9. False
  11. page.has_other_pages()
  12. True
  14. page.next_page_number()
  15. 2
  17. # Take care here, since there is no previous page,
  18. # if we call the method `previous_page_number() we will get an exception:
  19. page.previous_page_number()
  20. EmptyPage: That page number is less than 1

FBV 分页

这里是我们如何使用 FBV 来实现分页：

boards/views.py 查看完整文件

  1. from django.db.models import Count
  2. from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
  3. from django.shortcuts import get_object_or_404, render
  4. from django.views.generic import ListView
  5. from .models import Board
  7. def board_topics(request, pk):
  8.     board = get_object_or_404(Board, pk=pk)
  9.     queryset = board.topics.order_by('-last_updated').annotate(replies=Count('posts') - 1)
  10.     page = request.GET.get('page', 1)
  12.     paginator = Paginator(queryset, 20)
  14.     try:
  15.         topics = paginator.page(page)
  16.     except PageNotAnInteger:
  17.         # fallback to the first page
  18.         topics = paginator.page(1)
  19.     except EmptyPage:
  20.         # probably the user tried to add a page number
  21.         # in the url, so we fallback to the last page
  22.         topics = paginator.page(paginator.num_pages)
  24.     return render(request, 'topics.html', {'board': board, 'topics': topics})

这部分的实现是使用了 Bootstrap 的四个分页组件来正确的渲染页面。你需要花时间阅读代码，看看它是否适合你。我们在这里使用的是我们之前用过的方法。在这种情况下，topics 不再是一个查询集（QuerySet），而是一个 paginator.page 的实例。

在 topics HTML列表的基础上，我们可以渲染分页组件：

templates/topics.html 查看完整文件

  2. {% if topics.has_other_pages %}
  3.   <nav aria-label="Topics pagination" class="mb-4">
  4.     <ul class="pagination">
  5.       {% if topics.has_previous %}
  6.         <li class="page-item">
  7.           <a class="page-link" href="?page={{ topics.previous_page_number }}">Previous</a>
  8.         </li>
  9.       {% else %}
  10.         <li class="page-item disabled">
  11.           <span class="page-link">Previous</span>
  12.         </li>
  13.       {% endif %}
  15.       {% for page_num in topics.paginator.page_range %}
  16.         {% if topics.number == page_num %}
  17.           <li class="page-item active">
  18.             <span class="page-link">
  19.               {{ page_num }}
  20.               <span class="sr-only">(current)</span>
  21.             </span>
  22.           </li>
  23.         {% else %}
  24.           <li class="page-item">
  25.             <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
  26.           </li>
  27.         {% endif %}
  28.       {% endfor %}
  30.       {% if topics.has_next %}
  31.         <li class="page-item">
  32.           <a class="page-link" href="?page={{ topics.next_page_number }}">Next</a>
  33.         </li>
  34.       {% else %}
  35.         <li class="page-item disabled">
  36.           <span class="page-link">Next</span>
  37.         </li>
  38.       {% endif %}
  39.     </ul>
  40.   </nav>
  41. {% endif %}

Django入门与实践-第23章：分页实现 - 图2

GCBV 分页

下面，相同的实现，但这次使用ListView。

boards/views.py 查看完整文件

  1. class TopicListView(ListView):
  2.     model = Topic
  3.     context_object_name = 'topics'
  4.     template_name = 'topics.html'
  5.     paginate_by = 20
  7.     def get_context_data(self, **kwargs):
  8.         kwargs['board'] = self.board
  9.         return super().get_context_data(**kwargs)
  11.     def get_queryset(self):
  12.         self.board = get_object_or_404(Board, pk=self.kwargs.get('pk'))
  13.         queryset = self.board.topics.order_by('-last_updated').annotate(replies=Count('posts') - 1)
  14.         return queryset

在使用基于类的视图分页时，我们与模板中paginator进行交互的方式有点不同。它会在模板中提供以下变量:paginator,page_obj,is_paginated,object_list,还有一个我们在 context_object_name 中定义名字的变量。在我们的例子中，这个额外的变量将被命名为 topics ，并且它将等同于 object_list。

关于这个 get_context_data ，其实，它就是我们在扩展 GCBV 时向请求上下文添加内容的方式。

但这里的主要是 paginate_by 属性。一般情况下，只需添加它就足够了。

要记得更新 urls.py 哦：

myproject/urls.py 查看完整文件

  1. from django.conf.urls import url
  2. from boards import views
  4. urlpatterns = [
  5.     # ...
  6.     url(r'^boards/(?P<pk>\d+)/$', views.TopicListView.as_view(), name='board_topics'),
  7. ]

现在我们来修改一下模板：

templates/topics.html 查看完整文件

  2. {% block content %}
  3.   <div class="mb-4">
  4.     <a href="{% url 'new_topic' board.pk %}" class="btn btn-primary">New topic</a>
  5.   </div>
  7.   <table class="table mb-4">
  8.     <!-- table content suppressed -->
  9.   </table>
  11.   {% if is_paginated %}
  12.     <nav aria-label="Topics pagination" class="mb-4">
  13.       <ul class="pagination">
  14.         {% if page_obj.has_previous %}
  15.           <li class="page-item">
  16.             <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
  17.           </li>
  18.         {% else %}
  19.           <li class="page-item disabled">
  20.             <span class="page-link">Previous</span>
  21.           </li>
  22.         {% endif %}
  24.         {% for page_num in paginator.page_range %}
  25.           {% if page_obj.number == page_num %}
  26.             <li class="page-item active">
  27.               <span class="page-link">
  28.                 {{ page_num }}
  29.                 <span class="sr-only">(current)</span>
  30.               </span>
  31.             </li>
  32.           {% else %}
  33.             <li class="page-item">
  34.               <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
  35.             </li>
  36.           {% endif %}
  37.         {% endfor %}
  39.         {% if page_obj.has_next %}
  40.           <li class="page-item">
  41.             <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
  42.           </li>
  43.         {% else %}
  44.           <li class="page-item disabled">
  45.             <span class="page-link">Next</span>
  46.           </li>
  47.         {% endif %}
  48.       </ul>
  49.     </nav>
  50.   {% endif %}
  52. {% endblock %}

现在花点时间运行一下测试代码，如果有需要调整的地方就修一下。

boards/tests/test_view_board_topics.py

  1. from django.test import TestCase
  2. from django.urls import resolve
  3. from ..views import TopicListView
  5. class BoardTopicsTests(TestCase):
  6.     # ...
  7.     def test_board_topics_url_resolves_board_topics_view(self):
  8.         view = resolve('/boards/1/')
  9.         self.assertEquals(view.func.view_class, TopicListView)

可复用的分页模板

就像我们在 form.html 中封装模板时做的一样，我们也可以为分页的HTML代码片创建类似的东西。

我们来对主题帖子页面进行分页，进而找到一种复用分页组件的方法。

boards/views.py 查看完整文件

  1. class PostListView(ListView):
  2.     model = Post
  3.     context_object_name = 'posts'
  4.     template_name = 'topic_posts.html'
  5.     paginate_by = 2
  7.     def get_context_data(self, **kwargs):
  8.         self.topic.views += 1
  9.         self.topic.save()
  10.         kwargs['topic'] = self.topic
  11.         return super().get_context_data(**kwargs)
  13.     def get_queryset(self):
  14.         self.topic = get_object_or_404(Topic, board__pk=self.kwargs.get('pk'), pk=self.kwargs.get('topic_pk'))
  15.         queryset = self.topic.posts.order_by('created_at')
  16.         return queryset

更新一下 url.py [查看完整文件]

  1. from django.conf.urls import url
  2. from boards import views
  4. urlpatterns = [
  5.     # ...
  6.     url(r'^boards/(?P<pk>\d+)/topics/(?P<topic_pk>\d+)/$', views.PostListView.as_view(), name='topic_posts'),
  7. ]

现在，我们从topics.html模板中获取分页部分的html代码片，并在 templates/includes 文件夹下面创建一个名为 pagination.html 的新文件，和 forms.html 同级目录:

  1. myproject/
  2.  |-- myproject/
  3.  |    |-- accounts/
  4.  |    |-- boards/
  5.  |    |-- myproject/
  6.  |    |-- static/
  7.  |    |-- templates/
  8.  |    |    |-- includes/
  9.  |    |    |    |-- form.html
  10.  |    |    |    +-- pagination.html  <-- here!
  11.  |    |    +-- ...
  12.  |    |-- db.sqlite3
  13.  |    +-- manage.py
  14.  +-- venv/

templates/includes/pagination.html

  2. {% if is_paginated %}
  3.   <nav aria-label="Topics pagination" class="mb-4">
  4.     <ul class="pagination">
  5.       {% if page_obj.has_previous %}
  6.         <li class="page-item">
  7.           <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
  8.         </li>
  9.       {% else %}
  10.         <li class="page-item disabled">
  11.           <span class="page-link">Previous</span>
  12.         </li>
  13.       {% endif %}
  15.       {% for page_num in paginator.page_range %}
  16.         {% if page_obj.number == page_num %}
  17.           <li class="page-item active">
  18.             <span class="page-link">
  19.               {{ page_num }}
  20.               <span class="sr-only">(current)</span>
  21.             </span>
  22.           </li>
  23.         {% else %}
  24.           <li class="page-item">
  25.             <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
  26.           </li>
  27.         {% endif %}
  28.       {% endfor %}
  30.       {% if page_obj.has_next %}
  31.         <li class="page-item">
  32.           <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
  33.         </li>
  34.       {% else %}
  35.         <li class="page-item disabled">
  36.           <span class="page-link">Next</span>
  37.         </li>
  38.       {% endif %}
  39.     </ul>
  40.   </nav>
  41. {% endif %}

现在，我们在 topic_posts.html 文件中来使用它：

templates/topic_posts.html 查看完整文件

  2. {% block content %}
  4.   <div class="mb-4">
  5.     <a href="{% url 'reply_topic' topic.board.pk topic.pk %}" class="btn btn-primary" role="button">Reply</a>
  6.   </div>
  8.   {% for post in posts %}
  9.     <div class="card {% if forloop.last %}mb-4{% else %}mb-2{% endif %} {% if forloop.first %}border-dark{% endif %}">
  10.       {% if forloop.first %}
  11.         <div class="card-header text-white bg-dark py-2 px-3">{{ topic.subject }}</div>
  12.       {% endif %}
  13.       <div class="card-body p-3">
  14.         <div class="row">
  15.           <div class="col-2">
  16.             <img src="{% static 'img/avatar.svg' %}" alt="{{ post.created_by.username }}" class="w-100">
  17.             <small>Posts: {{ post.created_by.posts.count }}</small>
  18.           </div>
  19.           <div class="col-10">
  20.             <div class="row mb-3">
  21.               <div class="col-6">
  22.                 <strong class="text-muted">{{ post.created_by.username }}</strong>
  23.               </div>
  24.               <div class="col-6 text-right">
  25.                 <small class="text-muted">{{ post.created_at }}</small>
  26.               </div>
  27.             </div>
  28.             {{ post.message }}
  29.             {% if post.created_by == user %}
  30.               <div class="mt-3">
  31.                 <a href="{% url 'edit_post' post.topic.board.pk post.topic.pk post.pk %}"
  32.                    class="btn btn-primary btn-sm"
  33.                    role="button">Edit</a>
  34.               </div>
  35.             {% endif %}
  36.           </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   {% endfor %}
  42.   {% include 'includes/pagination.html' %}
  44. {% endblock %}

别忘了修改主循环为 {% for post in posts %}。

我们同样也可以更新一下先前的模板，topics.html 模板同样也可以这个封装的分页模板。

templates/topics.html 查看完整文件

  2. {% block content %}
  3.   <div class="mb-4">
  4.     <a href="{% url 'new_topic' board.pk %}" class="btn btn-primary">New topic</a>
  5.   </div>
  7.   <table class="table mb-4">
  8.     <!-- table code suppressed -->
  9.   </table>
  11.   {% include 'includes/pagination.html' %}
  13. {% endblock %}

为了测试目的，你需要添加一些帖子（或者通过 python shell 去创建），然后修改代码中的 paginate_by 到一个较小的数字，比如 2 ，然后看看页面会发生什么变化。

Django入门与实践-第23章：分页实现 - 图3

（查看完整文件）

更新一下测试用例：

boards/tests/test_view_topic_posts.py

  1. from django.test import TestCase
  2. from django.urls import resolve
  3. from ..views import PostListView
  5. class TopicPostsTests(TestCase):
  6.     # ...
  7.     def test_view_function(self):
  8.         view = resolve('/boards/1/topics/1/')
  9.         self.assertEquals(view.func.view_class, PostListView)