Django 學習之分頁器的使用

時間 2019-11-07

原文原文鏈接

# 建立項目 page_projectcss

配置settings html

啓動前端

# 導入分頁器相關模塊
python

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

查看urls sql

from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
]

查看views ，測試一條數據，準備數據100條npm

def index(request):
    # 插入一條數據
    # book_1 = Book(title='python', price="60")
    # book_1.save()
    Booklist = []
    for i in range(100):
        Booklist.append(Book(title="book" + str(i), price=30 + i * 2))
    Book.objects.bulk_create(Booklist)
    
    """
    :param request:
    :return:
    """
    return HttpResponse("index")

查看一條數據 sqllite django

查看插入的100條數據
bootstrap

功能一、展現數據裏面的全部數據app

def index(request):
    # 分頁器
    book_list = Book.objects.all()
    print(book_list, type(book_list))
    return render(request, "index.html", locals())

html 頁面ide

前端頁面顯示以下

功能二、分頁器經常使用的功能

views

book_list = Book.objects.all()
paginator = Paginator(book_list, 3)  # 每頁顯示三條數據
print(paginator, type(paginator))

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

訪問頁面刷新獲取數據

# 顯示首頁數據

views

first_page = (request.GET.get())
first_page_data = paginator.page(first_page)

index .html

顯示首頁 {% %}
    {{ .}} ---{{ .}}
        {% %}

前端訪問顯示

功能3、根據請求頁面數顯示不一樣頁面的數據，不存在的頁面數據就顯示首頁

try:
    current_page_number = int(request.GET.get("page", 1))
    if current_page_number < 34:
        current_page = paginator.page(current_page_number)
    elif current_page_number < 0:
        current_page = paginator.page(current_page_number)
    else:
        current_page = paginator.page(1)
except EmptyPage as e:
    current_page = paginator.page(1)

index.html

當前頁面爲  {% %}
    {{ .}} ---{{ .}}
        {% %}

訪問展現

超出34 頁面默認顯示首頁

功能4、引入bootstrap 和分頁格式豐富樣式

views

def index(request):
    # 分頁器
    book_list = Book.objects.all()
    paginator = Paginator(book_list, 10)  # 每頁顯示三條數據
    print(paginator, type(paginator))
    page_range = paginator.page_range

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

    # 根據請求頁面數顯示不一樣頁面的數據，不存在的頁面數據就顯示首頁

    try:
        current_page_num= int(request.GET.get("page", 1))
        current_page = paginator.page(current_page_num)
        print(current_page, type(current_page))
        print("object_list", current_page.object_list)
    except EmptyPage as e:
        current_page = paginator.page(1)
    return render(request, "index.html", locals())

index 頁面

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

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

<br>
<p> 當前頁面爲 </p>
<ul>
{% for book in current_page %}
    <li>{{ book.title }}:{{ book.price }}</li>
 {% endfor %}
</ul>

<p> 顯示頁碼  </p>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true"> 上一頁</span>
      </a>
    </li>
  
  <p> 循環遍歷 頁碼數 </p>
 {% for item in paginator.page_range %}
 
  <p> 當顯示當前頁面的時候加藍 </p>
  
          {% 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>


</body>
</html>

頁面效果

# 根據循環當前的頁面進行判斷 current_page

上一頁使用 current_page|add:-1 或者 current_page.previous_page_number

下一頁使用 current_page|add:+1 或者 current_page.next_page_number

<li>
    {% if  current_page.has_previous %}
        <a href="?page ={{ current_page|add:-1 }}" aria-label="Previous">
            {#      <a href="?page ={{ current_page.previous_page_number }}" aria-label="Previous">#}  
            <span aria-hidden="true"> 上一頁</span>
        </a>
    {% else %}
        <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>

    {% endif %}
</li>


<li>
    {% if current_page.has_next %}
        <a href="?page= {{ current_page|add:+1}}" aria-label="Next">

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

查看頁面

顯示默認的五頁

views 代碼

if paginator.num_pages > 11:
    if current_page_num - 5 < 1:
        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:
        page_range = range(current_page_num - 5, current_page_num + 6)
else:
    page_range = paginator.page_range

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> index</title>
    <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>

<br>
<p> 當前頁面爲 </p>
<ul>
 {% for book in current_page %}
        <li>{{ book.title }}:{{ book.price }}</li>
 {% endfor %}
</ul>

<p> 顯示頁碼 </p>

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

 {% endif %}
        </li>

 {% 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 %}

        <li>
 {% if current_page.has_next %}
                <a href="?page= {{ current_page|add:+1}}" aria-label="Next">

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

</nav>


</body>
</html>

頁面顯示