Django學習筆記（12）——分頁功能

　　這一篇博客記錄一下自己學習Django中分頁功能的筆記。分頁功能在每個網站都是必要的，當頁面因需要展示的數據條目過多，導致無法全部顯示，這時候就需要采用分頁的形式進行展示。

　　分頁在網站隨處可見，下面展示一個分頁的樣式：

 　　分頁的實現，不僅提高了用戶的體驗，還減輕了數據庫讀取數據的壓力。Django自帶名為Paginator的分頁工具，方便我們實現分頁功能，這個類存放在django/core/paginator.py。它可以接收列表，元組或者其他可迭代對象。

 　　下面先學習一下Paginator的基本語法。

Django中Paginator基本語法

1，分頁器函數Paginator的基本語法

　　Paginator類的作用是將我們需要分頁的數據分割成若干份，當我們實現一個Paginator類的實例時，需要給其傳入參數，我們點到Paginator類里，可以看到其定義如下：

class Paginator:

    def __init__(self, object_list, per_page, orphans=0,
                 allow_empty_first_page=True):
        self.object_list = object_list
        self._check_object_list_is_ordered()
        self.per_page = int(per_page)
        self.orphans = int(orphans)
        self.allow_empty_first_page = allow_empty_first_page

　　根據定義我們可以做如下解釋，（上述代碼沒有將其類屬性和方法貼出來）：

• object_list：可以是列表，元組，查詢集或者其他含有count()或者 __len()__方法的可切片對象。對於連續的分頁，查詢集應該有序，例如有order_by()項或者默認ordering參數。
• per_page：每一頁中包含條目數目的最大值，不包括獨立成頁的那頁。
• orphans=0：當你使用此參數時說明你不希望最后一頁只有很少的條目。如果最后一頁的條目數少於等於orphans的值，則這些條目會被歸並到上一頁中（此時的上一頁變成最后一頁）。例如有23項條目，per_page=10，orphans=0，則由三頁，分別為10,10,3，如果orphans>=3，則為2頁，分別為10， 13。
• allow_empty_first_page=True：表示默認允許第一頁為空

　　一般情況，我們只需傳入兩個參數。第一個參數是數據源，可以是列表，元組，以及查詢集。第二個參數需要傳入一個整數，表示每頁顯示數據條數。

1.1  Paginator類的方法

• Paginator.page(number)：根據參數number返回一個Page對象（number為1的倍數）

　　使用如下：

#第1頁的page對象
page1=paginator.page(1) 

for i in page1:         #遍歷第1頁的所有數據對象
    print(i)

print(page1.object_list) #第1頁的所有數據

#第2頁的page對象
page2=paginator.page(2)

　　

1.2   Paginator類的屬性

• Paginator.count：所有頁面對象總數，即統計 object_list 中 item 數目，當計算 object_list 所含對象的數量時，Paginator 會首先嘗試調用 object_list.count()。如果 object_list沒有 count()方法，Paginator接着會回退使用 Len(object_list)。
• Paginator.num_pages：頁面總數
• Paginator.page_range：頁碼范圍（頁碼列表），從1開始（列表是顧頭不顧尾），例如[1,2,3,4]。

　　上面三個屬性是我們Paginator類中常用的屬性。我們可以打印其屬性對應的值：

book_list=Book.objects.all()

paginator = Paginator(book_list, 10)

print("count:",paginator.count)           #數據總數
print("num_pages",paginator.num_pages)    #總頁數
print("page_range",paginator.page_range)  #頁碼的列表

 

2，Page對象的基本語法

　　我們通常不用手動創建Page對象，可以從Paginator類來獲取。Paginator類提供一個 **page(number)** 函數，該函數返回的是一個Page對象。參數number表示第幾個分頁。如果number=1，那么page() 返回的對象是第一分頁的Page對象。在前端頁面中顯示數據，我們主要的操作都是基於Page對象。具體的定義如下：

class Page(collections.Sequence):

    def __init__(self, object_list, number, paginator):
        self.object_list = object_list
        self.number = number
        self.paginator = paginator

2.1  page對象的方法

• Page.has_next()  如果有下一頁，則返回True。
• Page.has_previous() 如果有上一頁，返回 True。
• Page.has_other_pages() 如果有上一頁或下一頁，返回True。
• Page.next_page_number() 返回下一頁的頁碼。如果下一頁不存在，拋出InvlidPage異常。
• Page.previous_page_number() 返回上一頁的頁碼。如果上一頁不存在，拋出InvalidPage異常。
• Page.start_index() 返回當前頁上的第一個對象，相對於分頁列表的所有對象的序號，從1開始。比如，將五個對象的列表分為每頁兩個對象，第二頁的start_index()會返回3。
• Page.end_index() 返回當前頁上的最后一個對象，相對於分頁列表的所有對象的序號，從1開始。 比如，將五個對象的列表分為每頁兩個對象，第二頁的end_index() 會返回 4。

　　上面加粗的就是我們常用的 page對象方法：

page2=paginator.page(2)

print(page2.has_next())            #是否有下一頁
print(page2.next_page_number())    #下一頁的頁碼
print(page2.has_previous())        #是否有上一頁
print(page2.previous_page_number()) #上一頁的頁碼

　　

2.2  page對象的屬性

• Page.object_list 當前頁上所有對象的列表。
• Page.number 當前頁的序號，從1開始。
• Page.paginator 相關的Paginator對象

2.3  page對象的用法

　　下面舉個例子：

#  使用 Paginator 對象返回第一頁的  page 對象

books = paginator.page(1)

　　這就是當number=1的時候，page()返回的對象就是第一分頁的Page對象。

 

3，非法頁碼的處理

　　InvalidPage(Exception):  異常的基類，當paginator傳入一個無效的頁碼時拋出。

　　Paginator.page()放回在所請求的頁面無效（比如不是一個整數）時，或者不包含任何對象時拋出異常。通常，捕獲InvalidPage異常就夠了，但是如果你想更加精細一些，可以捕獲以下兩個異常之一：

• exception PageNotAnInteger，當向page()提供一個不是整數的值時拋出。
• exception EmptyPage，當向page()提供一個有效值，但是那個頁面上沒有任何對象時拋出。

       這兩個異常都是InalidPage的子類，所以可以通過簡單的try - except InvalidPage來處理它們。

try:
    print(page)
    book_list = paginator.page(page)
except PageNotAnInteger:
    book_list = paginator.page(1)
except EmptyPage:
    book_list = paginator.page(paginator.num_pages)

　　

4，對Paginator類中函數的簡單練習

分頁是Web應用常用的手法，Django提供了一個分頁器類Paginator（django.core.paginator.Paginator)，可以很容易的實現分頁的功能。
該類有兩個構造參數，一個是數據的集合，另一個是每頁放多少條數據。

Paginator的基本使用如下：

$python manage.py shell

>>> from django.core.paginator import Paginator

>>> objects = ['john', 'paul', 'george', 'ringo']

>>> p = Paginator(objects, 2)      #每頁兩條數據的一個分頁器

>>> p.count        #數據總數

4

>>> p.num_pages      #總頁數

2

>>>p.page_range       #頁碼的列表

[1, 2]

>>> page1 = p.page(1)     #第1頁

>>> page1

<Page 1 of 2>

>>> page1.object_list     #第1頁的數據

['john', 'paul']

>>> page2 = p.page(2)

>>> page2.object_list      #第2頁的數據

['george', 'ringo']

>>> page2.has_next()     #是否有后一頁

False

>>> page2.has_previous()   #是否有前一頁

True

>>> page2.has_other_pages()   #是否有其他頁

True

>>> page2.next_page_number()  #后一頁的頁碼

3

>>> page2.previous_page_number()  #前一頁的頁碼

1

>>> page2.start_index()   # 本頁第一條記錄的序數（從1開始）

3

>>> page2.end_index()    # 本頁最后錄一條記錄的序數（從1開始）

4

>>> p.page(0)               #錯誤的頁，拋出異常

...EmptyPage: That page number is less than 1

>>> p.page(3)              #錯誤的頁，拋出異常

...EmptyPage: That page contains no results


其實前面scaffold生成的內容里面就已經包含了分頁的功能，相信有了對Paginator的了解，
你自己就可以看懂在view函數和模板中如何使用分頁器了。

　　

5， 一個簡單的示例

基本代碼如下：

from django.shortcuts import render,HttpResponse

# Create your views here.
from django.core.paginator import Paginator,InvalidPage,EmptyPage,PageNotAnInteger


def index(req):

    user_list=["用戶"+str(i) for i in range(100)]

    user_list=getPage(req,user_list)

    return render(req,"index.html",locals())


def getPage(req,user_list):

    paginator=Paginator(user_list,5)

    try:
        current_page=req.GET.get("page",1) #  http://127.0.0.1:8000/index/?page=20
        article_list=paginator.page(current_page)
    except (EmptyPage,InvalidPage,PageNotAnInteger):
        article_list=paginator.page(1)

    return user_list


#*******----------index.html
{% for i in user_list %}
    <p>{{ i }}</p>
{% endfor %}
　　

　　

分頁功能的制作過程

1，完成分頁功能的總體思路

下面分頁學習的總體思路分為五步。

• 1，給數據庫插入很多數據，然后保證可以進行分頁
• 2，完成簡單的前端分頁樣式，然后我們可以看到分頁的雛形
• 3，完成點擊數字頁面都可以進入對應頁面的功能
• 4，完成上一頁，下一頁可以進入對應頁面的功能
• 5，如果一頁內總頁數超出默認頁數，我們將其限制在10內

2，為分頁准備數據

2.1，創建一個數據模型

　　首先，我們需要創建一個測試項目，我這里將其稱為 pageDemo。然后創建一個app，我這里叫做app01。

　　下面對於models.py的代碼：

from django.db import models

# Create your models here.

class Book(models.Model):
    title = models.CharField(max_length=32)
    price = models.DecimalField(decimal_places=2, max_digits=8)

　　將數據庫進行遷移。

python  manage.py makeigirations

python manage.py migrate

　　

2.2，向數據庫中添加數據

　　添加數據的時候，我們不能這樣添加

# Create your views here.
def index(request):
    for i in range(100):
        Book.objects.create(title="book_%s" % i, price=i * i)

    return render(request, 'index.html')

　　這樣雖然可以添加成功，但是每插入一條數據，都要訪問一次數據庫，要插入100次，要是插入成千上萬次，數據庫也受不了啊，這是性能問題。所以，我們通過一個Django中的特性 bulk_create()方法批量導入。

　　django.db.models.query.QuerySet.bulk_create() 批量創建對象，減少SQL查詢的次數。這里不多講，下面直接使用

　　view視圖中批量導入數據的代碼：

def index(request):
    # 批量導入
    book_list = []
    for i in range(100):
        book = Book(title='book_%s' %i, price=i*i)
        book_list.append(book)
    Book.objects.bulk_create(book_list)
    return HttpResponse("OK")
    

　　上面代碼中，我們插入了100條數據，我們的方法是創建那么多的數據，先將其保存到一個列表中，然后再將其批量存在數據庫中。

　　然后開啟項目，我們進入網頁測試，當出現下面結果，則成功：

 　　這里簡單說一下，我們打印 book，我們會發現效果如下：

 當我們在model表里，添加顯示字段的時候，也就是下面代碼：

 　　則出現效果如下：

　　查看數據庫中Book表里面的數據（因為上面添加了兩遍，所以是200多數據）：

 　　添加完之后就將添加數據的代碼注釋掉了。

2.3，后端查看插入的數據狀況

　　這里我們使用ORM獲取數據庫中所有的數據，然后使用Paginator將每頁數據存為10條，也就是每一頁顯示的數據條數為10，這里我們可以修改。

    book_list = Book.objects.all()

    # Paginator 分頁器需要兩個參數
    paginator = Paginator(book_list, 10)
    # 數據總數
    print('count', paginator.count)
    # 總頁數
    print('num_pages', paginator.num_pages)
    # 頁碼的列表
    print("page_range", paginator.page_range)

　　結果如下：

count 200
num_pages 20
page_range range(1, 21)

　　從結果來看，總共有200條數據，這里總共有20頁數據，頁碼列表為[1,21]。（因為列表是顧頭不顧尾，所以正常）

2.4，前端頁面展示分頁的情況

　　展示所有的內容的前端代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% for item in book_list %}
        <li>{{ item }}</li>
    {% endfor %}
</body>
</html>

　　效果如下：

　　顯示第一頁的兩種方式（其實是顯示具體某一頁的方法）：

    # 顯示第一頁 的數據的兩種方式
    page1 = paginator.page(1)
    print(page1.object_list)
    for i in page1:
        print(i)

　　拿到當前頁的視圖函數代碼：

    current_page = int(request.GET.get('page', 1))
    current_page = paginator.page(current_page)

　　完整代碼如下：

def index(request):
    book_list = Book.objects.all()
    # paginator 分頁器需要兩個參數,一個object_list  一個 per_page
    paginator = Paginator(book_list, 10)

    # 去前端拿到對應的頁數
    current_page_num = int(request.GET.get('page', 1))
    current_page = paginator.page(current_page_num)

    # 顯示某一頁具體數據的兩種方式
    print("object_list", current_page.object_list)
    for i in current_page:
        print(i)

    return render(request, 'index.html', locals())

　　當然我們的前端也要修改變量：

    {% for item in current_page %}
        <li>{{ item }}</li>
    {% endfor %}

　　查看第一頁的效果圖：

　　查看第二頁，或者n頁：（只需要設置?page=n即可）

 　　但是如果超出總頁數的話，會報出異常，或者page傳來的數據是一個負數（比如-1，-2等），也是會報錯。

 

 　　這里我們在view視圖函數中捕獲異常：

    # 如果輸出的頁面大於總頁數的話，可以加上異常捕獲
    try:
        current_page = int(request.GET.get('page', 1))
        current_page = paginator.page(current_page)
        # 顯示某一頁具體數據的兩種方式
        for i in current_page:
            print(i)
    except EmptyPage as e:
        current_page = paginator.page(1)
    except PageNotAnInteger:
        current_page = paginator.page(1)

　測試一下：

3，完善前端分頁按鈕功能

　　我們的分頁效果其實已經起步完成了，但是用戶肯定不會每次還要輸入 ?page=n 來跳轉到想要去的頁面把。這里我們就需要做一個按鈕，可以點擊對應頁面到對應的頁數獲取對應的數據，比如博客園的：

 　　下面我們做這個功能。

　　為了方便起見，我們使用了Bootstrap的CDN，這里我們直接使用Bootstrap里面的分頁組件，進行簡單的操作。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

　　下面是Bootstrap組件中一個簡單的分頁代碼：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

　　修改一下，代碼如下：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">上一頁</span>
      </a>
    </li>

      {% for foo in paginator.page_range %}
        <li><a href="#">{{ foo }}</a></li>
      {% endfor  %}

    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">下一頁</span>
      </a>
    </li>
  </ul>
</nav>

　　結果是這樣的：

　　雖然此時的效果已經完成，但是各個標簽不能點擊。下面我們繼續完善。

4，點擊1-10都進入對應的頁面

　　這時候，我們后端代碼不需要改變，只需要修改前端代碼即可。

    {% for item in paginator.page_range %}
        <li><a href="?page={{ item }}">{{ item }}</a></li>
      {% endfor %}

　　這里前端中href屬性，如果頁面中有變量，我們只需要修改?以后的內容即可，前面的默認不動。

　　然后點擊每一頁就出現對應的數據（我這里點擊了9）：

　　我們發現點擊9，雖然跳到了9這一頁，但是我們從分頁中就看不出來，所以我們希望點擊9的時候，9的顏色加粗，或者說變為深色。如何做呢？

　　這里我們調用bootstrap中的class屬性 active。下面修改代碼：

<ul>
    {% for item in current_page %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">上一頁</span>
            </a>
        </li>

        {% for item in paginator.page_range %}
            {% if current_page_num == item %}
                <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
            {% else %}
                <li><a href="?page={{ item }}">{{ item }}</a></li>
            {% endif %}
        {% endfor %}

        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">下一頁</span>
            </a>
        </li>
    </ul>
</nav>

　　修改后的效果如下：

　　這里我們點擊每一頁的時候，在href標簽中動態的傳輸每一頁的頁碼，這里就可以訪問1-10中每一頁的頁面。

　　注意：這里我們需要注意的是，當在url中輸入 ?page=333的時候，也就是不存在的頁碼的時候，會報錯，所以我們使用if - else 進行修改。如果不存在的時候就默認使用第一頁即可。

　　此時，我們點擊1-10就可以進入對應的頁面了，下面完成點擊上一頁，下一頁進入對應的頁面的功能。

5，點擊上一頁下一頁進入對應的頁面

　　點擊上一頁，下一頁進入對應的頁面其實不難，但是需要注意的問題就是當上一頁或者下一頁沒有數據的時候，我們需要進行處理。

　　我們之前學過page對象的方法，在這里就可以使用。下面為了方便列出來需要用的：

• Page.has_next()：如果有下一頁，則返回True。
• Page.has_previous()：如果有上一頁，則返回True。
• Page.next_page_number()：返回下一頁的頁面。如果下一頁不存在，拋出InvalidPage異常。
• Page.previous_page_number()：返回上一頁的頁面。如果上一頁不存在，拋出InvalidPage異常

　　下面修改前端代碼，加入if-else判斷：

<ul>
    {% for item in current_page %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        {% if current_page.has_previous %}
            <li>
                <a href="?page={{ current_page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            </li>
        {% endif %}

        {% for item in paginator.page_range %}
            {% if current_page_num == item %}
                <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
            {% else %}
                <li><a href="?page={{ item }}">{{ item }}</a></li>
            {% endif %}
        {% endfor %}

        {% if current_page.has_next %}
            <li>
                <a href="?page={{ current_page.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">下一頁</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">下一頁</span>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>

　　這樣當點第一頁的時候，再點上一頁，則無法點擊了。  這里采用了 disabled。

6，如果一頁內總頁數超出默認頁數，我們將其限制在10內

6.1 描述問題

　　可能沒有描述清楚，下面我們使用圖和代碼描述。　　

　　當每頁顯示3條數據的時候， view視圖函數如下：

# Paginator 分頁器需要兩個參數
    paginator = Paginator(book_list, 3)

　　前端代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<ul>
    {% for book in current_page %}
        <li>{{ book.title }}-----------{{ book.price }}</li>
    {% endfor %}
</ul>




<nav aria-label="Page navigation">
  <ul class="pagination">
  {% if current_page.has_previous %}
      <li><a href="?page={{ current_page.previous_page_number }}" aria-label="Previous">
          <span aria-hidden="true">上一頁</span></a></li>
      {% else %}
      <li class="disabled"><a href="" aria-label="Next">
          <span aria-hidden="true">上一頁</span></a></li>
      {% endif %}


      {% for foo in paginator.page_range %}
      {% if current_page_num == foo %}
        <li class="active"><a  href="?page={{ foo }}">{{ foo }}</a></li>
      {% else %}
        <li><a href="?page={{ foo }}">{{ foo }}</a></li>
      {% endif %}
      {% endfor  %}

      {% if current_page.has_next %}
      <li><a href="?page={{ current_page.next_page_number }}" aria-label="Next">
          <span aria-hidden="true">下一頁</span></a></li>
      {% else %}
      <li class="disabled"><a href="" aria-label="Next">
          <span aria-hidden="true">下一頁</span></a></li>
      {% endif %}
  </ul>
</nav>

</body>
</html>

　　所以效果如下：

6.2  修改並設置限定

　　因為這樣不好看，甚至說嚴重不好看，所以我們這里來將其限制到10內。

　　在view視圖函數中，我們可以判斷num_page的大小，如果大於10，則設置范圍，如果小於10，則正常即可。而大於10 的時候需要注意一個問題，那就是會出現-1或者大於頁碼范圍的數，我們這里需要捕獲，並將其修改。代碼如下：

    current_page_num = int(request.GET.get('page', 1))

    if paginator.num_pages > 11:
        if current_page_num-5 < 1:
            page_range = range(1, 11)
        elif current_page_num + 5 > paginator.num_pages:
            page_range = range(paginator.num_pages-10, paginator.num_pages + 1)
        else:
            page_range = range(current_page_num-5, current_page_num+6)
    else:
       page_range = paginator.page_range

　　前端只需要將Paginator.page_range修改為我們后端設置的page_range變量。

      {% for foo in page_range %}
      {% if current_page_num == foo %}
        <li class="active"><a  href="?page={{ foo }}">{{ foo }}</a></li>
      {% else %}
        <li><a href="?page={{ foo }}">{{ foo }}</a></li>
      {% endif %}
      {% endfor  %}

　　這樣得到的效果如下：

　　即使他每頁只顯示3條數據，即使總頁數很多，但是我們每頁還是只顯示10個頁面。

 

7，完整的Django內置分頁代碼

7.1，Django內置分頁

　　views.py

from django.shortcuts import render
from .models import Book
from django.core.paginator import Paginator, EmptyPage


# Create your views here.
def index(request):
    # insert data to sqlite  not recommend
    # for i in range(100):
    #     Book.objects.create(title="book_%s" % i, price=i * i)

    # insert data to sqlite  recommend
    # finish to append data annotation the code
    # book_list = []
    # for i in range(100):
    #     book = Book(title="book_%s" % i, price=i * 2)
    #     print(book)
    #     book_list.append(book)
    #
    # Book.objects.bulk_create(book_list)

    book_list = Book.objects.all()
    # paginator 分頁器需要兩個參數,一個object_list  一個 per_page
    paginator = Paginator(book_list, 10)
    # 數據總數
    print("count", paginator.count)
    # 總頁數
    print('num_pages', paginator.num_pages)
    # 頁碼的列表范圍
    print('page_range', paginator.page_range)

    # 去前端拿到對應的頁數
    current_page_num = int(request.GET.get('page', 1))

    if paginator.num_pages > 1:
        if current_page_num - 5 < 1:
            # 這里寫的（1， 11） 是我們要顯示10個按鈕
            page_range = range(1, 12)
        elif current_page_num + 5 > paginator.num_pages:
            page_range = range(paginator.num_pages - 10, paginator.num_pages + 1)
        else:
            # range 也是顧頭不夠尾
            page_range = range(current_page_num - 5, current_page_num + 6)
    else:
        page_range = paginator.page_range

    try:
        current_page = paginator.page(current_page_num)

        # 顯示某一頁具體數據的兩種方式
        print("object_list", current_page.object_list)
        for i in current_page:
            print(i)
    except EmptyPage as e:
        # 如果出現的是負數，或者大於頁碼的數，我們默認讓其顯示第一頁
        current_page = paginator.page(1)

    return render(request, 'index.html', locals())

　　

　　html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<ul>
    {% for item in current_page %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        {% if current_page.has_previous %}
            <li>
                <a href="?page={{ current_page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            </li>
        {% endif %}

        {% for item in page_range %}
            {% if current_page_num == item %}
                <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
            {% else %}
                <li><a href="?page={{ item }}">{{ item }}</a></li>
            {% endif %}
        {% endfor %}

        {% if current_page.has_next %}
            <li>
                <a href="?page={{ current_page.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">下一頁</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">下一頁</span>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
</body>
</html>

　　

7.2，擴展內置分頁 

　　views.py

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger


class CustomPaginator(Paginator):
    def __init__(self, current_page, max_pager_num, *args, **kwargs):
        """
        :param current_page: 當前頁
        :param max_pager_num:最多顯示的頁碼個數
        :param args:
        :param kwargs:
        :return:
        """
        self.current_page = int(current_page)
        self.max_pager_num = max_pager_num
        super(CustomPaginator, self).__init__(*args, **kwargs)

    def page_num_range(self):
        # 當前頁面
        # self.current_page
        # 總頁數
        # self.num_pages
        # 最多顯示的頁碼個數
        # self.max_pager_num
        print(1)
        if self.num_pages < self.max_pager_num:
            return range(1, self.num_pages + 1)
        print(2)
        part = int(self.max_pager_num / 2)
        if self.current_page - part < 1:
            return range(1, self.max_pager_num + 1)
        print(3)
        if self.current_page + part > self.num_pages:
            return range(self.num_pages + 1 - self.max_pager_num, self.num_pages + 1)
        print(4)
        return range(self.current_page - part, self.current_page + part + 1)


L = []
for i in range(999):
    L.append(i)

def index(request):
    current_page = request.GET.get('p')
    paginator = CustomPaginator(current_page, 11, L, 10)
    # per_page: 每頁顯示條目數量
    # count:    數據總個數
    # num_pages:總頁數
    # page_range:總頁數的索引范圍，如: (1,10),(1,200)
    # page:     page對象
    try:
        posts = paginator.page(current_page)
        # has_next              是否有下一頁
        # next_page_number      下一頁頁碼
        # has_previous          是否有上一頁
        # previous_page_number  上一頁頁碼
        # object_list           分頁之后的數據列表
        # number                當前頁
        # paginator             paginator對象
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:
        posts = paginator.page(paginator.num_pages)

    return render(request, 'index.html', {'posts': posts})

擴展內置分頁：views.py

　　

　　Html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul>
    {% for item in posts %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<div class="pagination">
<span class="step-links">
{% if posts.has_previous %}
    <a href="?p={{ posts.previous_page_number }}">Previous</a>
{% endif %}

    {% for i in posts.paginator.page_num_range %}
        <a href="?p={{ i }}">{{ i }}</a>
    {% endfor %}

    {% if posts.has_next %}
        <a href="?p={{ posts.next_page_number }}">Next</a>
    {% endif %}
</span>

<span class="current">
Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
</span>

</div>
</body>
</html>

擴展內置分頁：Html

　　

8、自定義分頁

　　分頁功能在每個網站都是必要的，對於分頁來說，其實就是根據用戶的輸入計算出應該在數據庫表中的起始位置。

• 1、設定每頁顯示數據條數
• 2、用戶輸入頁碼（第一頁、第二頁...）
• 3、設定顯示多少頁號
• 4、獲取當前數據總條數
• 5、根據設定顯示多少頁號和數據總條數計算出，總頁數
• 6、根據設定的每頁顯示條數和當前頁碼，計算出需要取數據表的起始位置
• 7、在數據表中根據起始位置取值，頁面上輸出數據
• 8、輸出分頁html，如：［上一頁］［1］［2］［3］［4］［5］［下一頁］

8.1  分頁實例

#!/usr/bin/env python
# _*_coding:utf-8_*_
from django.utils.safestring import mark_safe
 
class PageInfo(object):
    def __init__(self,current,totalItem,peritems=5):
        self.__current=current
        self.__peritems=peritems
        self.__totalItem=totalItem
    def From(self):
        return (self.__current-1)*self.__peritems
    def To(self):
        return self.__current*self.__peritems
    def TotalPage(self):  #總頁數
        result=divmod(self.__totalItem,self.__peritems)
        if result[1]==0:
            return result[0]
        else:
            return result[0]+1
 
def Custompager(baseurl,currentPage,totalpage):  #基礎頁，當前頁，總頁數
    perPager=11
    #總頁數<11
    #0 -- totalpage
    #總頁數>11
        #當前頁大於5 currentPage-5 -- currentPage+5
            #currentPage+5是否超過總頁數,超過總頁數，end就是總頁數
        #當前頁小於5 0 -- 11
    begin=0
    end=0
    if totalpage <= 11:
        begin=0
        end=totalpage
    else:
        if currentPage>5:
            begin=currentPage-5
            end=currentPage+5
            if end > totalpage:
                end=totalpage
        else:
            begin=0
            end=11
    pager_list=[]
    if currentPage<=1:
        first="<a href=''>首頁</a>"
    else:
        first="<a href='%s%d'>首頁</a>" % (baseurl,1)
    pager_list.append(first)
 
    if currentPage<=1:
        prev="<a href=''>上一頁</a>"
    else:
        prev="<a href='%s%d'>上一頁</a>" % (baseurl,currentPage-1)
    pager_list.append(prev)
 
    for i in range(begin+1,end+1):
        if i == currentPage:
            temp="<a href='%s%d' class='selected'>%d</a>" % (baseurl,i,i)
        else:
            temp="<a href='%s%d'>%d</a>" % (baseurl,i,i)
        pager_list.append(temp)
    if currentPage>=totalpage:
        next="<a href='#'>下一頁</a>"
    else:
        next="<a href='%s%d'>下一頁</a>" % (baseurl,currentPage+1)
    pager_list.append(next)
    if currentPage>=totalpage:
        last="<a href=''>末頁</a>"
    else:
        last="<a href='%s%d'>末頁</a>" % (baseurl,totalpage)
    pager_list.append(last)
    result=''.join(pager_list)
    return mark_safe(result)   #把字符串轉成html語言

　　總結，分頁時需要做三件事：

• 創建處理分頁數據的類
• 根據分頁數據獲取數據
• 輸出分頁HTML，即：［上一頁］［1］［2］［3］［4］［5］［下一頁］

 

9，自定義分頁的實例

from django.shortcuts import render,HttpResponse

# Create your views here.
from django.core.paginator import Paginator,InvalidPage,EmptyPage,PageNotAnInteger


def index(req):

    user_list_all=["用戶"+str(i) for i in range(1000)]
    #需要分頁顯示

    current_page=int(req.GET.get("page",1))

    # start=(current_page-1)*5
    # end=(current_page-1)*5+5
    start=(current_page-1)*10
    end=(current_page-1)*10+10

    user_list=user_list_all[start:end]
    #不能讓用戶去url寫page,所以寫入Page Number
    #問題是:顯示多少頁碼(Page Number)?

    total_item=len(user_list_all)
    pageNumber,remaining=divmod(total_item,10)  #每頁顯示10條數據
    if remaining>0:
        pageNumber+=1

    list_tag=[]

    #默認最多顯示10頁碼
    PN=6
    half_PN=int(PN/2)
    if pageNumber<PN:
        BEGIN=0
        END=pageNumber
    else:
        if current_page>half_PN:

            if current_page<(pageNumber-half_PN):
                BEGIN=current_page-half_PN
                END=current_page+half_PN
            else:
                #最后幾頁不需要再增加新的頁碼
                BEGIN=pageNumber-PN
                END=pageNumber
        else:
            BEGIN=0
            END=PN

    baseurl='/index/?page='

    if current_page<=1:
        first="<a href='#'>首頁</a>"
    else:
        first="<a href='%s%d'>首頁</a>" % (baseurl,1)
    list_tag.append(first)

    if current_page<=1:
        prev="<a href=''>上一頁</a>"
    else:
        prev="<a href='%s%d'>上一頁</a>" % (baseurl,current_page-1)
    list_tag.append(prev)

    for i in range(BEGIN+1,END+1):
        if i == current_page:
            temp="<a href='%s%d' class='active'>%d</a>" % (baseurl,i,i)
        else:
            temp="<a href='%s%d'>%d</a>" % (baseurl,i,i)
        list_tag.append(temp)
    if current_page>=pageNumber:
        next="<a href='#'>下一頁</a>"
    else:
        next="<a href='%s%d'>下一頁</a>" % (baseurl,current_page+1)
    list_tag.append(next)
    if current_page>=pageNumber:
        last="<a href='#'>末頁</a>"
    else:
        last="<a href='%s%d'>末頁</a>" % (baseurl,pageNumber)

    list_tag.append(last)

    tags="".join(list_tag)

    return render(req,"index.html",locals())



#------------------------------------index.html
#------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pager a{
            display: inline-block;
            width: 60px;
            height: 20px;
            padding: 5px;
            background-color: darkgrey;
            color: #2459a2;
            text-decoration: none;
            text-align: center;
            line-height: 20px;
        }
        .pager a.active{
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>


{% for user in user_list %}
    <p>{{ user }}</p>
{% endfor %}
<div class="pager">
    {{ tags|safe }}
</div>

</body>
</html>

　　

 

10，自己寫一個分頁組件

　　這個組件不依賴於任何東西，使用的時候可以直接調用，代碼如下：

　　pagination.py

"""
分頁組件
"""


class Pagination(object):
    def __init__(self, current_page, all_count, base_url, query_params, per_page=20, pager_page_count=11):
        """
        分頁初始化
        :param current_page: 當前頁碼
        :param per_page: 每頁顯示數據條數
        :param all_count: 數據庫中總條數
        :param base_url: 基礎URL
        :param query_params: QueryDict對象，內部含所有當前URL的原條件
        :param pager_page_count: 頁面上最多顯示的頁碼數量
        """
        self.base_url = base_url
        try:
            self.current_page = int(current_page)
            if self.current_page <= 0:
                raise Exception()
        except Exception as e:
            self.current_page = 1
        self.query_params = query_params
        self.per_page = per_page
        self.all_count = all_count
        self.pager_page_count = pager_page_count
        pager_count, b = divmod(all_count, per_page)
        if b != 0:
            pager_count += 1
        self.pager_count = pager_count

        half_pager_page_count = int(pager_page_count / 2)
        self.half_pager_page_count = half_pager_page_count

    @property
    def start(self):
        """
        數據獲取值起始索引
        :return:
        """
        return (self.current_page - 1) * self.per_page

    @property
    def end(self):
        """
        數據獲取值結束索引
        :return:
        """
        return self.current_page * self.per_page

    def page_html(self):
        """
        生成HTML頁碼
        :return:
        """
        # 如果數據總頁碼pager_count<11 pager_page_count
        if self.pager_count < self.pager_page_count:
            pager_start = 1
            pager_end = self.pager_count
        else:
            # 數據頁碼已經超過11
            # 判斷： 如果當前頁 <= 5 half_pager_page_count
            if self.current_page <= self.half_pager_page_count:
                pager_start = 1
                pager_end = self.pager_page_count
            else:
                # 如果： 當前頁+5 > 總頁碼
                if (self.current_page + self.half_pager_page_count) > self.pager_count:
                    pager_end = self.pager_count
                    pager_start = self.pager_count - self.pager_page_count + 1
                else:
                    pager_start = self.current_page - self.half_pager_page_count
                    pager_end = self.current_page + self.half_pager_page_count

        page_list = []

        if self.current_page <= 1:
            prev = '<li><a href="#">上一頁</a></li>'
        else:
            self.query_params['page'] = self.current_page - 1
            prev = '<li><a href="%s?%s">上一頁</a></li>' % (self.base_url, self.query_params.urlencode())
        page_list.append(prev)
        for i in range(pager_start, pager_end + 1):
            self.query_params['page'] = i
            if self.current_page == i:
                tpl = '<li class="active"><a href="%s?%s">%s</a></li>' % (
                    self.base_url, self.query_params.urlencode(), i,)
            else:
                tpl = '<li><a href="%s?%s">%s</a></li>' % (self.base_url, self.query_params.urlencode(), i,)
            page_list.append(tpl)

        if self.current_page >= self.pager_count:
            nex = '<li><a href="#">下一頁</a></li>'
        else:
            self.query_params['page'] = self.current_page + 1
            nex = '<li><a href="%s?%s">下一頁</a></li>' % (self.base_url, self.query_params.urlencode(),)
        page_list.append(nex)
        page_str = "".join(page_list)
        return page_str

　　調用方法如下：

后端調用

• - 可以自己設置 per_page_count，組件中的 per_page_count設置為20，我們自己可以讓每頁獲取的數據設置為10,15,20等等。
• - 獲取表數據中的數據總數（all_count = self.model_class.objects.all().count()）
• - 獲取 query_params 這是一個QueryDict對象，內部含所有當前URL的原條件——我們使用 request_parmas = request.GET.copy() 復制一份URL地址，然后調用

調用方法如下：

        # ########## 1. 處理分頁 ##########
        all_count = self.model_class.objects.all().count()
        query_params = request.GET.copy()
        query_params._mutable = True

        pager = Pagination(
            current_page=request.GET.get('page'),
            all_count=all_count,
            base_url=request.path_info,
            query_params=query_params,
            per_page=self.per_page_count,
        )
        
        data_list = self.model_class.objects.all()[pager.start:pager.end]

　　同時，我們要將pager傳給前端：

        return render(
            request,
            'testchange.html',
            {
                'pager':pager
            }
        )

　　

前端調用

　　在前端調用的方法如下：

        <nav>
            <ul class="pagination">
                {{ pager.page_html|safe }}
            </ul>
        </nav>

　　

11，注意：完整代碼上傳到我的GitHub上

　　我的GitHub地址：https://github.com/LeBron-Jian/LuffyCity_Project-StudyNote

　　或者：點擊傳送門 直接打開。注意進去找 pageDemo文件。

 

 

參考文獻：https://www.cnblogs.com/king-lps/p/7324821.html

https://www.cnblogs.com/yuanchenqi/articles/9036515.html