# Dica 26 - Paginação e Breadcrumb [![](https://980509322-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfu9nhT31FhtY3TMBTi%2Fuploads%2Fgit-blob-b3d2f4124239955eec7072e99d8d0f8ab8cac2b9%2Fyoutube.png?alt=media)](https://youtu.be/wuTJQSwF9gw) **Importante:** remova a `\` no meio das tags. ![](https://980509322-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mfu9nhT31FhtY3TMBTi%2Fuploads%2Fgit-blob-c80bb8144ef90a579a7a4d4fd8bfb6a22340a07b%2Ftags.png?alt=media) ## Paginação Edite `product/views.py` ```python # from django.views.generic import ListView # class ProductListView(ListView): # model = Product # paginate_by = 10 ``` ```python from django.core.paginator import Paginator def product_list(request): template_name = 'product/product_list.html' object_list = Product.objects.all() search = request.GET.get('search') ... # https://docs.djangoproject.com/en/4.1/topics/pagination/#using-paginator-in-a-view-function items_per_page = 10 paginator = Paginator(object_list, items_per_page) page_number = request.GET.get('page') page_obj = paginator.get_page(page_number) context = { 'page_obj': page_obj, 'items_count': page_obj.object_list.count(), } return render(request, template_name, context) ``` ## Botões da Paginação Edite `product/includes/navigation_buttons.html` ```html
{\% if page_obj.has_previous %} ``` O `&search={{ request.GET.search }}` mantém a **busca paginada**. ```html
{\% if page_obj.has_previous %} Anterior {\% endif %} {\% if page_obj.has_next %} Próximo {\% endif %}
``` ## Arruma o contador de itens ```html
{\% if page_obj.has_previous %} {\% endif %} {\% if page_obj.has_next %} {\% endif %} Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }} - Mostrando {{ items_count }} de {{ page_obj.paginator.count }} items
``` ### Move os arquivos para a pasta `core` ``` mv backend/product/templates/product/includes/navigation_buttons.html backend/core/templates/includes/ mv backend/product/templates/product/includes/search.html backend/core/templates/includes/ ``` Edite `product_list.html` ```html {\% include "includes/search.html" %} {\% include "includes/navigation_buttons.html" %} ``` ## breadcrumb ``` mv backend/product/templates/product/includes/breadcrumb.html backend/core/templates/includes/ ``` Edite `product_list.html`, `product_detail.html` e `product_form.html` ```html {\% include "includes/breadcrumb.html" %} ``` Edite `product/models.py` ```python class Product(TimeStampedModel): ... def list_url(self): return reverse_lazy('product:product_list') @property def verbose_name(self): return self._meta.verbose_name @property def verbose_name_plural(self): return self._meta.verbose_name_plural ``` Edite `product/views.py` ```python def product_create(request): template_name = 'product/product_form.html' form = ProductForm(request.POST or None) if request.method == 'POST' and form.is_valid(): form.save() return redirect('product:product_list') verbose_name_plural = form.instance._meta.verbose_name_plural context = { 'form': form, 'verbose_name_plural': verbose_name_plural } return render(request, template_name, context) ``` Edite core/includes/breadcrumb.html ```html ```