Django組件——分頁器(paginator)

1、視圖層

from django.shortcuts import render

# Create your views here.

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


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

    # 分頁器的使用:
    book_list = Book.objects.all()

    paginator = Paginator(book_list, 8)   # 第二個參數設置每頁顯示的條數

    print(paginator.count)        # 數據總條數  100
    print(paginator.num_pages)    # 總頁數  13
    print(paginator.page_range)   # 頁碼的列表 range(1, 14)


    page1 = paginator.page(1)  # 第一頁的page對象
    # 顯示某一頁具體數據的兩種方式:
    # 方式一:
    print("object_list", page1.object_list)  # object_list <QuerySet [<Book: Book object (1)>, <Book: Book object (2)>,...
    # 方式二:
    for i in page1:
        print(i)
    """輸出
    Book object (1)
    Book object (2)
    Book object (3)
    Book object (4)
    Book object (5)
    Book object (6)
    Book object (7)
    Book object (8)
    """

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


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

    if paginator.num_pages > 11:
        if current_page_num-5 < 1:
            # 當前頁碼-5小於1時,默認顯示前11個頁碼
            page_range = range(1, 12)
        elif current_page_num + 5 > paginator.num_pages:
            # 當前頁碼+5大於總頁數時,默認顯示後11個
            page_range = range(paginator.num_pages-10, paginator.num_pages+1)
        else:
            # 顯示當前頁碼和左五右五共11個頁碼
            page_range = range(current_page_num-5, current_page_num+6)
    else:
        # 不超過11個頁碼的狀況,顯示全部頁碼
        page_range = paginator.page_range

    # 超出頁碼範圍或小於1的頁碼,會拋出emptypage錯誤,作以下處理:
    try:
        current_page_num = int(request.GET.get("page", 1))  # /?page=1  get取不到默認給它默認值:1
        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)  # 固定在出現emptypage時顯示首頁

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

  注意:javascript

  一、批量生成數據,添加到數組中,再一次性寫入數據庫表中:Book.objects.bulk_create(book_list)css

  二、分頁器對象生成後,.count查看數據總條數,.num_pages顯示總頁數,.page_range頁碼列表。html

  三、顯示某一頁的具體數據有兩種方式:java

# 方式一:
print("object_list", page1.object_list)  # object_list <QuerySet [<Book: Book object (1)>, <Book: Book object (2)>,...
# 方式二:
for i in page1:
    print(i)
"""輸出
Book object (1)
Book object (2)
Book object (3)
Book object (4)
Book object (5)
Book object (6)
Book object (7)
Book object (8)
"""

  四、.page()方法能夠生成頁對象,具有以下方法可用於上一頁下一頁網頁查看。python

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

  五、獲得當前頁碼,且設置默認頁碼爲1;根據當前頁碼獲得當前頁對象。數據庫

current_page_num = int(request.GET.get("page", 1))  # /?page=1  get取不到默認給它默認值:1
current_page = paginator.page(current_page_num)

  六、針對超出頁碼範圍的頁碼,會拋出emptypage錯誤,能夠作以下處理:django

# 超出頁碼範圍或小於1的頁碼,會拋出emptypage錯誤,作以下處理:
    try:
        current_page_num = int(request.GET.get("page", 1))  # /?page=1  get取不到默認給它默認值:1
        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)  # 固定在出現emptypage時顯示首頁

  七、頁面具有翻頁功能,設置同時最多隻能顯示11條,處理以下:bootstrap

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

if paginator.num_pages > 11:
    if current_page_num-5 < 1:
        # 當前頁碼-5小於1時,默認顯示前11個頁碼
        page_range = range(1, 12)
    elif current_page_num + 5 > paginator.num_pages:
        # 當前頁碼+5大於總頁數時,默認顯示後11個
        page_range = range(paginator.num_pages-10, paginator.num_pages+1)
    else:
        # 顯示當前頁碼和左五右五共11個頁碼
        page_range = range(current_page_num-5, current_page_num+6)
else:
    # 不超過11個頁碼的狀況,顯示全部頁碼
    page_range = paginator.page_range

2、模板層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<ul>
    {% for book in current_page %}
        <li>{{ book.title }}:{{ book.price }}</li>
    {% endfor %}
</ul>
<nav aria-label="Page navigation">
    <ul class="pagination">
{#        <li>#}
            {# 方法一:上一頁在當前頁碼減1 #}
{#             <a href="?page={{ current_page_num|add:-1 }}" aria-label="Previous">#}
{#                 <span aria-hidden="true">上一頁</span>#}
{#            </a>#}
{#        </li>#}
{#        方法二:#}
        {% if current_page.has_previous %}
            <li><a href="?page={{ current_page_num.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>
        {% else %}
            {# 頁碼到第一頁後,上一頁設置爲禁用 #}
            <li class="disabled"><a href="?page={{ current_page_num.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>
        {% endif %}

        {# 自動生成<li>標籤,路徑前面不變得狀況下從?開始配置便可 #}
        {% for item in page_range %}
            {# 當前頁面添加active顯示高亮 #}
            {% 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_num.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li>
        {% else %}
            <li class="disabled"><a href="?page={{ current_page_num.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li>
        {% endif %}
    </ul>
</nav>

</body>
</html>

注意:數組

  一、讀取當前頁碼數據生成標籤展現在頁面上:app

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

  二、引入bootstrap

<head>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
</head>

body部分:
<nav aria-label="Page navigation">
    <ul class="pagination">
    ...
    </ul>
</nav>

  三、生成頁面頁碼標籤,路徑前面不變的狀況下能夠從?開始配置:

{# 自動生成<li>標籤,路徑前面不變得狀況下從?開始配置便可 #}
{% for item in page_range %}
    {# 當前頁面添加active顯示高亮 #}
    {% 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 %}

  四、生成頁面翻頁,上一頁、下一頁:

  (1)第一種方式是在當前頁碼作加減法:{{ current_page_num|add:-1 }};{{ current_page_num|add:1 }}

<li>
    <!--方法一:上一頁在當前頁碼減1 -->
    <a href="?page={{ current_page_num|add:-1 }}" aria-label="Previous">
        <span aria-hidden="true">上一頁</span>
    </a>
</li>

  (2)第二種方式是使用page對象自帶的方法:

<!--上一頁-->
{% if current_page.has_previous %}
    <li><a href="?page={{ current_page_num.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>
{% else %}
    {# 頁碼到第一頁後,上一頁設置爲禁用 #}
    <li class="disabled"><a href="?page={{ current_page_num.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>
{% endif %}


<!--下一頁-->
{% if current_page.has_next %}
    <li><a href="?page={{ current_page_num.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li>
{% else %}
    <li class="disabled"><a href="?page={{ current_page_num.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li>
{% endif %}
相關文章
相關標籤/搜索