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

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

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

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

    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)

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

    在我们返回去写代码之前，让我们用 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

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

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

    我们来简单看一下 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 来实现分页：

    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 %}
    16.           <li class="page-item active">
    17.             <span class="page-link">
    18.               {{ page_num }}
    19.               <span class="sr-only">(current)</span>
    20.             </span>
    21.           </li>
    22.         {% else %}
    23.           <li class="page-item">
    24.             <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
    25.           </li>
    26.         {% endif %}
    27.       {% endfor %}
    29.       {% if topics.has_next %}
    30.         <li class="page-item">
    31.           <a class="page-link" href="?page={{ topics.next_page_number }}">Next</a>
    32.         </li>
    33.       {% else %}
    34.         <li class="page-item disabled">
    35.           <span class="page-link">Next</span>
    36.         </li>
    37.       {% endif %}
    38.     </ul>
    39.   </nav>
    40. {% endif %}

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

    下面，相同的实现，但这次使用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 %}

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

    就像我们在 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
    3. urlpatterns = [
    4.     # ...
    5.     url(r'^boards/(?P<pk>\d+)/topics/(?P<topic_pk>\d+)/$', views.PostListView.as_view(), name='topic_posts'),
    6. ]

    现在，我们从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' %}

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

    boards/tests/test_view_topic_posts.py