Adicionando paginação no Django

Neste post veremos como adicionar paginação no Django, de forma simples, rápida e descomplicada teremos este recursos que é essencial para projetos como blogs ou e-commerces. 

Fala galera, tudo certo?

Hoje venho trazer um recurso bem legal, que o Django nos da de bandeja, a paginação.

Para alguns projetos como blogs e e-commerces é de suma importância você utilizar paginação, caso não tenha um recurso mais avançado com infinite scroll.

Projeto em andamento

Antes de iniciar é bom entender que este é um projeto em andamento, você pode fazer comigo do zero começando por aqui:

1. Instalando Django 2 e criando um projeto;

O código de todo o conteúdo está disponível aqui!

obs: ele está dividido em partes e esta á  parte 10, se quiser o código final utilize a pasta 10, caso queira acompanhar o tutorial inicie na pasta 8 ( pois a 9 se trata de outro assunto xD ).

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Como a paginação no Django funciona

Bom basicamente o Django tem uma classe chamada Paginator que possui todos os recursos que precisamos para uma paginação.

E o conceito principal é definido por: quantos itens queremos mostrar na paǵina.

Sendo assim passaremos isso para a view que a cada reload fará o cálculo de:

• Que página estamos;
• Quais itens devem estar na página que estamos;
• Se há página anterior;
• Se há próxima página;

Bom chega de papo e vamos ao que interessa!

Colocando a mão na massa

O destino principal da paginação no nosso projeto é a lista de posts.

Então vamos abrir o arquivo views.py do app blog

Primeiramente nos imports, você deve importar a classe Paginator deste jeito:

from django.core.paginator import Paginator

Depois vamos mudar a função post_list, ela deve ficar assim:

def post_list(request):
    post_list = Post.objects.all().order_by('-created_at')
    paginator = Paginator(post_list, 3)

    page = request.GET.get('page')
    posts = paginator.get_page(page)
    return render(request, 'blog/post_list.html', {'posts':posts})

Como eu comentei antes, nós passamos a Paginator nossa lista de posts e o limite de posts por página.

Na variável page o Django está se situando em qual página da paginação ele está.

E em posts ele verifica quais posts deve mostrar na página determinada.

No retorno deixamos igual, porém são enviados apenas os posts necessários.

Ajustando o template

Agora para o gran finale precisamos ajeitar o template.

Abra o arquivo post_list.html em blog/templates/blog/

Abaixo da div com classe row, adicione o seguinte HTML:

<div class="pagination">
    <span class="step-links">
        {% if posts.has_previous %}
            <a href="?page={{ posts.previous_page_number }}">Anterior</a>
        {% endif %}
    
        <span class="current">
            {{ posts.number }} de {{ posts.paginator.num_pages }}
        </span>
    
        {% if posts.has_next %}
            <a href="?page={{ posts.next_page_number }}">Próxima</a>
        {% endif %}
    </span>
</div>

Está bem na cara o que acontece nessa nossa adição de conteúdo, mas vamos revisar!

Temos dois ifs que verificam a existência da página anterior e da próxima página

No caso os elementos dentro destas template tags só serão mostrados se a condição for verdadeira

No span com class current nós temos o marcador de página, que vai situar o usuário qual página está e também quantas existem

As suas duas templates tags imprimem exatamente estes dados.

Agora vamos executar o projeto com o comando:

python manage.py runserver

E você deve ver algo semelhante a isto na lista de posts:

E é isso, estamos com a paginação rodando!

obs: Caso tenha dúvidas ainda em criação de templates veja este post que eu fiz somente sobre isso!

O CSS já está pronto

Vale ressaltar que estou focando no framework Django, então todo o CSS está no nosso repositório do Github, para adiantar o processo

Veja o mais atualizado até essa aula aqui.

Vamos adicionar um rodapé

Isso já estava me incomodando há alguns posts 😀

Então para deixar o projeto mais completo, vamos adicionar um footer a ele.

Abra o arquivo base.html em blog/templates/blog e depois da div com classe row, adicione o seguinte HTML:

<footer>
    <span class="copy">&copy; Copyright 2019, Django blog</span>
</footer>

Por fim com o rodapé pronto, o projeto deve ficar assim:

Já está com um jeitão de blog o nosso projeto.

Lembrando que o framework frontend desse projeto é o Bootstrap, veja aqui como inserir ele no Django, e já aprenda também alguns dos principais recursos. 

Conclusão

No início explicamos como funciona a paginação do Django rapidamente para entendermos o conceito da classe Paginator.

E então alteramos a view para que ela recebesse esta classe e conseguisse enviar para o front-end da aplicação as informações de paginação.

Depois alteramos o template para dispor estas informações aos usuários.

Bem simples, temos uma paginação funcional no blog.

O recurso de paginação é bom pois reduz a carga de servidor, carregando apenas os posts que limitamos na paginação! 🙂

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Pessoal, agradeço a todos por lerem até o fim, se possível compartilhem com os amigos interessados em Django e se inscrevam na nossa lista de e-mail para não perder as novidades.

Caso haja alguma dúvida ou crítica, comentem abaixo que responderei assim que possível, obrigado!