quarta-feira, 7 de maio de 2014

Paginação estilo Twitter com Django CBV e django-endless-pagination



Quem já não precisou fazer uma paginação ao estilo do twitter? Bom não é complicado. Pelo menos não com as dicas abaixo!

Requisitos necessários:

  • Python >= 2.6
  • Django >= 1.3
  • jQuery >= 1.7


Instalação:
pip install django-endless-pagination

Configuração:


Adicione a app na setting INSTALLED_APPS no settings.py:
...
'endless_pagination',
...

Adicione a linha abaixo na setting TEMPLATE_CONTEXT_PROCESSORS também no settings.py:
...
'django.core.context_processors.request',
...

Na views.py

from django.shortcuts import render, render_to_response, get_object_or_404
from django.template import Context, loader, RequestContext
from .models import Produto

class ProdutoTTPag(View):
 def get(self, request, *args, **kwargs):

  template = 'produtos/lista-produtos.html'
  page_template = 'produtos/paginacao.html'

  produtos = Produto.objects.filter(ativo=True)
  
  context = {
   'page_template': page_template,
   'produtos_list' : produtos,
  }

  if request.is_ajax():
   template = page_template

  return render_to_response(template, context, context_instance=RequestContext(request))


No urls.py

Adicione a linha abaixo:
...
url(r'^(?P[-\w]+)/$', views.ProdutoTTPag.as_view(), name='produtos'),
...


No template:

Aqui será necessário a criação de dois arquivos html. Um para ser de fato a lista (lista-produtos.html) e o outro para ser apenas os itens, para que o ajax possa trazê-los de forma correta (paginacao.html).

lista-produtos.html:
...
{% load endless %}
...

{% block extra_js %}
    <script src="{{ STATIC_URL }}endless_pagination/js/endless-pagination.js" type="text/javascript"></script>
    <script type="text/javascript">
     jQuery(document).ready(function($) {
      //$.endlessPaginate({
         //    paginateOnScroll: true,
         //    paginateOnScrollChunkSize: 5,
         //    paginateOnScrollMargin: 200
         //});

      $.endlessPaginate({});
     });
    </script>
{% endblock extra_js %}

...
<section class="list-products">
 <ul>
  {% include page_template %}
 </ul>
...
</section>

Aqui a parte comentada serve para trazer os resultados das outras páginas conforme o scroll da página.

paginacao.html:

{% load endless %}

{% paginate 9 produtos_list %}
{% for p in produtos_list %}
 <li>
  {# HTML PARA ITEM DO PRODUTO #}
 </li>
{% endfor %}
{% show_more %}

Mais informações em:

  1. http://django-endless-pagination.readthedocs.org/en/latest/index.html
  2. https://github.com/frankban/django-endless-pagination
  3. https://pypi.python.org/pypi/django-endless-pagination/2.0


hasta!