Manage pagination

1 files changed, 33 insertions, 12 deletions

diff --git a/showcase/templates/showcase/show_case.html b/showcase/templates/showcase/show_case.html
index 6a2f13b..15bc9c5 100644
--- a/showcase/templates/showcase/show_case.html
+++ b/showcase/templates/showcase/show_case.html
@@ -26,21 +26,42 @@
 
 {% if page.data %}
 <div class="row justify-content-md-center">
-    {% for item in page.data %}
-    <div class="col-md-auto m-1" style="width: 12rem;">
+  {% for item in paginated_data.object_list %}
+  <div class="col-md-auto m-1" style="width: 12rem;">
     <div class="card">
-    {% if item.images.0.thumbnail %}
-        <img src="{{item.images.0.thumbnail}}" class="card-img-top">
-    {% endif %}
-    <div class="card-body">
-      <a href="{% url 'display-item' page.slug forloop.counter0 %}">
-        {{item.denomination}}
-      </a>
-    </div>
-    </div>
+      {% if item.images.0.thumbnail %}<img src="{{item.images.0.thumbnail}}" class="card-img-top">{% endif %}
+      <div class="card-body">
+          {{item.denomination}}
+        <a class="stretched-link" href="{% url 'display-item' page.slug forloop.counter0 %}"></a>
+      </div>
     </div>
-    {% endfor %}
+  </div>
+  {% endfor %}
 </div>
+
+{% if paginator %}
+<hr>
+<nav aria-label="{% trans 'Pagination' %}" class="row justify-content-md-center">
+  <ul class="pagination">
+    <li class="page-item{% if not paginated_data.has_previous %} disabled{% endif %}">
+      <a class="page-link"{% if not paginated_data.has_previous %} tabindex="-1" href="#"{% else %} href="?page={{ paginated_data.previous_page_number }}"{% endif %} aria-label="Next">
+        <span aria-hidden="true">&laquo;</span>
+      </a>
+    </li>
+    {% for page_number in paginator.page_range %}
+    <li class="page-item{% if paginated_data.number == page_number %} disabled{% endif %}">
+      <a class="page-link" href="?page={{page_number}}">{{page_number}}</a>
+    </li>
+    {% endfor %}
+    <li class="page-item{% if not paginated_data.has_next %} disabled{% endif %}">
+      <a class="page-link"{% if not paginated_data.has_next %} tabindex="-1" href="#"{% else %} href="?page={{ paginated_data.next_page_number }}"{% endif %} aria-label="Next">
+        <span aria-hidden="true">&raquo;</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+{% endif %}
+
 {% endif %}
 
 {% endblock %}