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:
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 ).
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">© 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!
