[Django CSS] Bootstrap Pagination

1. Paginator 함수로 아이템 분할

vi views.py

# -*- coding: utf-8 -*-

from __future__ import unicode_literals

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

from django.shortcuts import render

from django.views import View

from .models import *

# Create your views here.

class basic(View):

  def get(self, request, *args, **kwargs):

    #data = Product.objects.all()

    catid = '000006'

    if 'catid' in kwargs:

      catid = kwargs['catid']

    data = Product.objects.filter(cat1id=catid)

    # item number per page

    num_page = 10

    paginator = Paginator(data, num_page)

    page = request.GET.get('page')

    try:

      contacts = paginator.page(page)

    except PageNotAnInteger:

      # If page is not an integer, deliver first page.

      contacts = paginator.page(1)

    except EmptyPage:

      # If page is out of range (e.g. 9999), deliver last page of results.

      contacts = paginator.page(paginator.num_pages)

    return render(request, 'brand/basic.html', context={'catid':catid,'contacts':contacts})

2. 기본 html 에 pagination 생성

{% extends "brand/basic_frame.html" %}

{% block content %}

<div class="pagination">

  <span class="step-links">

    <ul class="pagination">

    {% if contacts.has_previous %}

      <li><a href="?page={{ contacts.previous_page_number }}"> prev </a></li>

    {% endif %}

      <li><a href="#"> Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}. </a></li>

    {% if contacts.has_next %}

      <li><a href="?page={{ contacts.next_page_number }}"> next </a></li>

    {% endif %}

  </ul>

  </span>

</div>

<div class="container-fluid bg-3 text-center">

  <div class="row">

    {% for d in contacts %}

    <div class="col-sm-4">

      <div class="media">

        <div class="media-left media-middle">

          <img src="{{d.imgurl}}" class="media-object" width="100" height="100">

        </div>

        <div class="media-body">

          <h4> {{d.pname}} </h4>

          <p> {{d.brand}} </p>

        </div>

      </div>

    </div>

    {% endfor %}

  </div>

</div>

{% endblock %}

3. pagination 동작 확인

---

- Reference

https://www.w3schools.com/bootstrap/bootstrap_pagination.asp