ジャンゴを学習フィニッシャー使用


#プロジェクトpage_projectを作成します。


構成設定 



スタート  

#インポートモジュール関連するページャ


django.core.paginatorインポートページネータから、EmptyPage、PageNotAnInteger


ビューのURL 

app01インポートビューから

urlpatterns = [ 
    URL( '^管理/ R'、admin.site.urls)、
    URL( '^インデックス/ R'、views.index)
]


ビュービュー、テストデータは、データ100を準備します

デフ指数(要求): 
    #插入一条数据
    #book_1 =ブック(タイトル= 'のpython'、価格= "60")
    #1 book_1.save()
    ブックリスト= [] 
    iの範囲内(100):
        Booklist.append(ブック(タイトル= "ブック" + STR(I)、価格= 30 + i *は2))
    Book.objects.bulk_create(ブックリスト)
    
    "" " 
    :PARAM要求:
    :リターン:
    """ 
    )("インデックス"のHttpResponseを返します


    データsqlliteを見ます 

image.png


   100データ挿入を参照してください。 


image.png


image.png


内のすべてのデータを示す機能1、

デフ指数(要求): 
    #分页器
    book_list = Book.objects.all()
    プリント(book_list、タイプ(book_list))
    のリターン(要求、 "index.htmlを"、地元の人々を())レンダリング

htmlページ


image.png


フロントページには、以下の通りです

image.png


機能2、ページャ一般的に使用される機能


景色 

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)  # 页码的列表


访问页面刷新获取数据

image.png


# 显示首页数据


views 

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

index .html

显示首页 {% %}
    {{ .}} ---{{ .}}
        {% %}


前端访问显示


image.png

功能三、根据请求页面数显示不同页面的数据,不存在的页面数据就显示首页

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 页面默认显示首页

image.png


功能四、引入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/[email protected]/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>


页面效果


image.png


显示上一页,下一页 

# 根据循环当前的页面 进行判断   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>


查看页面 

image.png



显示默认的五页


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/[email protected]/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> 
 {%ならcurrent_page.has_next%} 
                <a href="?page= {{ current_page|add:+1}}" aria-label="Next"> 

 {#は、<a href = "?ページ= {{ current_page.next_page_number}}」ARIAラベル= "次へ">#} 
 <スパンARIA-隠さ= "真の">下一页</ span>の
                </a>の
 {%他%} 
                <LIクラス= "無効"> <a href="" aria-label="Next"> <スパンARIA-隠れ= "真">下一页</スパン> </a>の
 {%のENDIFの%} 
            </ LI> 
    </ UL> 

</ NAV> 


</ BODY> 
</ HTML>


ページ表示 

image.png



image.png



おすすめ

転載: blog.51cto.com/sdsca/2416043