Django學習筆記(12)——分頁功能

戰爭熱誠發表於2019-05-27

  這一篇部落格記錄一下自己學習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:表示預設允許第一頁為空

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

Paginator類的方法

  • Paginator.page(number):根據引數number返回一個Page物件(number為1的倍數)

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類中常用的屬性。

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

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物件的屬性

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

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的子類,所以可以通過簡單的except InvalidPage來處理它們。

 

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,建立一個資料模型

  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)

  將資料庫進行同步。

2.2,向資料庫中新增資料

  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表裡面的資料:

   新增完之後就將程式碼註釋掉了。

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 100
num_pages 10
page_range range(1, 11)

  從結果來看,總共有100條資料,這裡總共有10頁資料,頁碼列表為[1,11]。(因為列表是顧頭不顧尾,所以正常)

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

  顯示第一頁的兩種方式:

    # 顯示第一頁 的資料的兩種方式
    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)

  檢視第一頁的效果圖:

  檢視第二頁,或者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)

  相應的修改前端程式碼:

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

  

3,完善前端頁面

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

  下面是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都進入對應的頁面

  這時候,我們後端程式碼不需要改變,只需要修改前端程式碼即可。

  修改後的程式碼如下:

<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 %}
      {% if current_page == foo%}
        <li><a class="active" href="?page={{ foo }}">{{ foo }}</a></li>
      {% else %}
        <li><a href="?page={{ foo }}">{{ foo }}</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判斷:

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

  

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 django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

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

def index(request):
    current_page = request.GET.get('p')

    paginator = Paginator(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})

  

  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 %}
          <span class="current">
            Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
          </span>
          {% if posts.has_next %}
              <a href="?p={{ posts.next_page_number }}">Next</a>
          {% endif %}
      </span>

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

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>

  

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

相關文章