通過 Django Pagination 實現簡單分頁

  • 2019 年 11 月 8 日
  • 筆記

作者:HelloGitHub-追夢人物

文中所涉及的示例程式碼,已同步更新到 HelloGitHub-Team 倉庫

當部落格上發布的文章越來越多時,通常需要進行分頁顯示,以免所有的文章都堆積在一個頁面,影響用戶體驗。

Django 內置的 Pagination 能夠幫助我們實現簡單的分頁功能,在上一篇教程中我們使用腳本批量生成了幾百篇部落格文章,正好用於測試分頁效果。

Paginator 類的常用方法

分頁功能由 Django 內置的 Paginator 類提供,這個類位於 django.core.paginator 模組,需要使用它時,只需在適當的地方導入這個類即可:

from django.core.paginator import Paginator

下面的程式碼摘自 Django 的官方文檔中 Pagination 的示例,只需實例化一個 Paginator 對象,並在實例化時傳入一個需要分頁的列表對象,就可以得到分頁後的對象。

# 對 item_list 進行分頁,每頁包含 2 個數據。  >>> item_list = ['john', 'paul', 'george', 'ringo']  >>> p = Paginator(item_list, 2)

取特定頁的數據:

# 取第 2 頁的數據  >>> page2 = p.page(2)  >>> page2.object_list  ['george', 'ringo']

查詢特定頁的當前頁碼數:

>>> page2.number  2

查看分頁後的總頁數:

>>> p.num_pages  2

查看某一頁是否還有上一頁,以及查詢該頁上一頁的頁碼:

# 查詢第二頁是否還有上一頁  >>> page2.has_previous()  True    # 查詢第二頁上一頁的頁碼  >>> page2.previous_page_number()  1

查看某一頁是否還有下一頁,以及查詢該頁下一頁的頁碼:

# 查詢第二頁是否還有下一頁  >>> page2.has_next()  False    # 查詢第二頁下一頁的頁碼  >>> page2.next_page_number()  Traceback (most recent call last):  ...  EmptyPage: That page contains no results

更多方法和屬性請參閱 Django Pagination 的官方文檔

用 Paginator 給文章列表分頁

使用上面的一些方法,我們可以實現一個類似於 Django 官方部落格一樣的簡單分頁效果,效果如下。

這裡 Django 的官方文檔中給出了一個在視圖函數中對列表進行分頁的示例,這個視圖函數獲取一個聯繫人列表並對其分頁:

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger  from django.shortcuts import render    def listing(request):      contact_list = Contacts.objects.all()      paginator = Paginator(contact_list, 25) # 每頁顯示 25 個聯繫人        page = request.GET.get('page')      try:          contacts = paginator.page(page)      except PageNotAnInteger:          # 如果用戶請求的頁碼號不是整數,顯示第一頁          contacts = paginator.page(1)      except EmptyPage:          # 如果用戶請求的頁碼號超過了最大頁碼號,顯示最後一頁          contacts = paginator.page(paginator.num_pages)        return render(request, 'list.html', {'contacts': contacts})

這就是在視圖函數中使用分頁的程式碼邏輯,你可以把它當做一個模板應用於自己的任何需要分頁的視圖函數。不過在我們的部落格項目中,我們不必寫這些程式碼了。回顧在 Django 官方推薦的姿勢:類視圖 中的內容,我們已將視圖函數轉換成了類視圖。而類視圖 ListView 已經幫我們寫好了上述的分頁邏輯,我們只需通過指定 paginate_by 屬性來開啟分頁功能即可,即在類視圖中指定 paginate_by 屬性的值:

blog/views.py    class IndexView(ListView):      model = Post      template_name = 'blog/index.html'      context_object_name = 'post_list'      # 指定 paginate_by 屬性後開啟分頁功能,其值代表每一頁包含多少篇文章      paginate_by = 10

這裡我們設置了每 10 篇文章一頁。

在模板中設置分頁導航

接下來便是在模板中設置分頁導航,比如上一頁、下一頁的按鈕,以及顯示一些頁面資訊。我們這裡設置和 Django 官方部落格那樣的分頁導航樣式(具體的樣式見上圖)。ListView 傳遞了以下和分頁有關的模板變數供我們在模板中使用:

  • paginator ,即 Paginator 的實例。
  • page_obj ,當前請求頁面分頁對象。
  • is_paginated,是否已分頁。只有當分頁後頁面超過兩頁時才算已分頁。
  • object_list,請求頁面的對象列表,和 post_list 等價。所以在模板中循環文章列表時可以選 post_list ,也可以選 object_list

模板中使用示例:

templates/blog/index.html    {% if is_paginated %}  <div class="pagination-simple">    <!-- 如果當前頁還有上一頁,顯示一個上一頁的按鈕 -->    {% if page_obj.has_previous %}      <a href="?page={{ page_obj.previous_page_number }}">上一頁</a>    {% endif %}    <!-- 顯示當前頁面資訊 -->    <span class="current">第 {{ page_obj.number }} 頁 / 共 {{ paginator.num_pages }} 頁</span>    <!-- 如果當前頁還有下一頁,顯示一個下一頁的按鈕 -->    {% if page_obj.has_next %}      <a href="?page={{ page_obj.next_page_number }}">下一頁</a>    {% endif %}  </div>  {% endif %}

其中 {{ }} 模板變數中的內容,其含義已在文章開頭部分的 Paginator 類的常用方法中已有介紹。另外還要注意一點,請求哪一個頁面通過 page 查詢參數傳遞給 django 視圖,django 會根據 page 的值返回對應頁面的文章列表,所以上一頁和下一頁超鏈接的 href 屬性指向的 url 帶上了 page 查詢參數。

最終我們得到如下的分頁效果:

當然這只是一個簡單示例,分頁導航處的視覺效果並不是很好看,你可以自行為其添加 CSS 樣式使其看上去更加美觀。

進一步拓展

使用 Django 內置的 Pagination 只能實現上面的簡單分頁效果,但通常更加高級的分頁效果應該像下圖這樣:

當前頁面高亮顯示,且顯示當前頁面前後幾頁的頁碼,始終顯示第一頁和最後一頁的頁碼,中間可能還有省略號的效果,表示還有未顯示的頁碼。

僅僅使用 Django Pagination 內置的方法無法實現這樣的效果,需要自己寫分頁邏輯或者藉助第三方庫。接下來我們將詳細說明如何藉助第三方庫拓展 Pagination 以實現一個完善的分頁效果。


『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章,你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫我們、加入我們,讓更多人愛上開源、貢獻開源~