九、七天入門Django開發 - Django 實現部落格的分頁功能

阿新 • • 發佈：2021-12-16

前言

當部落格上釋出的文章越來越多時，通常需要進行分頁顯示。

步驟：

Bootstarp 實現分頁按鈕

去Bootstarp 官網找到分頁元件，把程式碼複製過來，微調即可

分頁的html程式碼
D:\project\blogs\myblogs\templates\blog\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Web框架</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

</head>
<body>
<div class="container page-header">
    <h1>入門Django Web框架
        <small>--- by wwh</small>

    </h1>

</div>
>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            {% for article in article_list %}

                <div>
                    <h2><a href="/blog/detail/{{ article.article_id }}">{{ article.title }}</a></h2>
                    <p>
                        {{ article.brief_content }}
                    </p>
                </div>
            {% endfor %}
        </div>
        <div>

            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="/blog/index?page={{ previous_page }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% for num in page_num %}
                    <li><a href="/blog/index?page={{ num }}">{{ num }}</a></li>
                    {% endfor %}
                    <li>
                        <a href="/blog/index?page={{ next_page }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>

    </div>
    <div class="col-md-3" role="complementary">
        <div>
            <h2>最新文章</h2>
            {% for article in article_list %}
                <h4><a href="/blog/detail/{{ article.article_id }}">{{ article.title }}</a></h4>
            {% endfor %}
        </div>
    </div>
</div>
</body>
</html>

通過 Django Pagination 實現分頁

首先直接看Django官網的例子

官網例子連線：
https://docs.djangoproject.com/en/2.2/topics/pagination/

Paginator 類的常用方法

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

首先進入python shell 模式


# 對 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

使用Django分頁元件實現分頁功能

在上一篇的基礎上，修改 get_index_page 函式即可

views.py

def get_index_page(request):
    page = request.GET.get('page')            # 獲取 page 引數
    if page:
        page = int(page)
    else:
        page = 1
    all_article = Article.objects.all()       # 獲取所有文章

    paginator = Paginator(all_article, 3)     # 一頁3篇文章
    page_num = paginator.num_pages            # 分頁的數量
    print('page num:', page_num)
    page_article_list = paginator.page(page)  # 獲取某一個的文章列表
    if page_article_list.has_next():          # 如果有下一頁
        next_page = page + 1                  # 頁數加一
    else:
        next_page = page                      # 否則下一頁就等於當前頁

    if page_article_list.has_previous():      # 如果有上一頁
        previous_page = page - 1              # 頁數減一
    else:
        previous_page = page                  # 否則上一頁就等於當前頁

    return render(request, 'blog/index.html',
                  {
                      'article_list': page_article_list,
                      'page_num': range(1, page_num + 1),
                      'curr_page': page,                  # 當前頁面
                      'next_page': next_page,             # 上一頁
                      'previous_page': previous_page,     # 下一頁
                  }
                  )

以上就實現了分頁功能