Django開発~ショッピングカート構築編4~BootStrap導入の続きです。
本日は、ページネーションを実装してみましょう。
<目次>
学習履歴
ページネーションとは
ページーネーションとは、日本語で「ページ分割」の意味で、商品一覧ページなど、表示項目数が多くなりがちなWebページを、各ページへのリンクを並べてアクセスしやすくするためのものです。
Google検索したときに、ページ下部に出てくるやつです。
Djangoでは、ページネーションの機能を実現するPaginatorオブジェクトが既に組み込まれています。
Djangoはできる子なのです。
しかも、Djangoの開発者によって、このページネーション機能は既に”テスト済み“であるため、私たちがテストコードを作ってテストを行う必要はありません。
※ケースによっては、テストをする必要はあるかもしれません。あくまで”一般的に”です。
テスト工数が削減できるのもDjangoを利用するメリットの一つです。
ページネーションを利用してみる
実装に入る前に、DjangoのShellを使って、少し遊んでみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
# Django Shellの機能を呼び出す >>> docker-compose exec app python manage.py shell # paginatorを呼び出す >>> from django.core.paginator import Paginator # プロダクトリスト >>> product_lists = ['Cat', 'Dog', 'Bard', 'Cow'] # Paginatorにプロダクトリストを渡す(2製品ずつ分割) >>> products = Paginator(product_lists , 2) # プロダクトの数 >>> products.count 4 # ページ数 >>> products.num_pages 2 # ページ1 >>> page1 = products.page(1) >>> page1 <Page 1 of 2> >>> page1.object_list ['Cat', 'Dog'] # ページ2 >>> page2 = products.page(2) >>> page2 <Page 2 of 2> >>> page2.object_list ['Bard', 'Cow'] # 次ページがあるか >>> page1.has_next() True >>> page2.has_next() False # 前ページはあるか >>> page1.has_previous() False >>> page2.has_previous() True |
このようにPaginatorオブジェクトは、「ページ情報」を保有しています。このページ情報を使って、ページネーションを実装します。
実装
ページネーションの大体の概要は理解いただけましたでしょうか?
それでは、実装してみましょう。
views.pyのall_products関数に実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
app/shop/views.py # new from django.core.paginator import Paginator, EmptyPage, InvalidPage def all_products(request): products_list = Product.valid_objects.all() # 3製品ごとに分割 paginator = Paginator(products_list, 3) try: # 何ページ目なのか取得("page"が指定されなかったときは、1を取得) page = int(request.GET.get('page', '1')) except: page = 1 try: # ページオブジェクト作成 products = paginator.page(page) except (EmptyPage, InvalidPage): products = paginator.page(paginator.num_pages) return render(request, 'shop/product_list.html', {'products': products}) |
続いて、product_list.htmlにページネーションを適用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
app/shop/templates/shop/product_list.html {% extends "base.html" %} {% load staticfiles %} {% block metadescription %} {% if category %} {{ category.description|truncatewords:155 }} {% else %} Welcome to the cushion store where you can buy comfy and awesome cushions. {% endif %} {% endblock %} {% block title %} {% if category %} {{ category.name }} - Perfect Cushion Store {% else %} See Our Cushion Collection - Perfect Cushion Store {% endif %} {% endblock %} {% block content %} <div class="row mx-auto my-2"> <div class="col-12"> <img src="{% static 'img/banner.jpg' %}" alt="Our Products Collection" class="img-fluid"> </div> </div> <br> <div class="row"> <div class="col-12"> <h1>Our Products Collection</h1> <p>Finding the perfect cushion for your room can instantly add to the levels of comfort and sense of style throughout your home.</p> </div> </div> <div class="row"> {% for product in products %} <div class="col-4"> <a href="{{product.get_url}}"><img src="{{product.image.url}}" alt="{{product.name}}" width="300" height="200"></a> <div> <h4>{{product.name}}</h4> <p>£{{product.price}}</p> </div> </div> {% endfor %} </div> <div class="row"> <!-- 追加 --> <div class="mx-auto"> {% if products.paginator.num_pages > 1 %} <hr> <div class="text-center"> {% for pg in products.paginator.page_range %} <a href="?page={{pg}}" class="btn btn-light btn-sm {% if products.number == pg %}active{% endif %}">{{pg}}</a> {% endfor %} </div> {% endif %} </div> </div> {% endblock %} |
動作確認
「localhost:8000/admin」にアクセスし、管理画面から商品を”4つ以上“投入しましょう。
それから「localhost:8000」にアクセスし、画面を確認してください。
ページ下部にページネーションが表示されたと思います。
とっても簡単ですね!
参考書籍
次回
次回は、検索機能を作成しましょう^^
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。