<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=338168267432629&amp;ev=PageView&amp;noscript=1">

django-endless-pagination: Taking Pagination to the Next Level

Twitter, Google, Facebook, Tumblr, and many other modern websites have many things in common – but none of these as useful as pagination. In some cases, users might not even see this feature as pagination, as there are no explicit pages actually being displayed – rather, the results are being …


{%- set hs_blog_post_body -%} {%- set in_blog_post_body = true -%}

Twitter, Google, Facebook, Tumblr, and many other modern websites have many things in common – but none of these as useful as pagination. In some cases, users might not even see this feature as pagination, as there are no explicit pages actually being displayed – rather, the results are being loaded separate from the rest of the page – such as Tumblr and Facebook feeds, or Google Images results.

django-endless-pagination solves this problem for the django user – by encapsulating in a single app all the tools needed to provide ajax pagination support, django users can spend more time developing, and less time reinventing the wheel.

pip install django-endless-pagination

You’ll need at least python 2.5, Django 1.0, and jQuery 1.3.

Settings:

1. add endless_pagination to INSTALLED_APPS

2. add the context processor:

from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS
TEMPLATE_CONTEXT_PROCESSORS += (
    'django.core.context_processors.request',
)

Usage:

Provided your system is displaying the objects in your template

{% for object in objects %}
    
{% endfor %}

You can use endless-pagination like this:



{% for object in objects %}
    
{% endfor %}

And that’s all!

 

At this point, you’re probably asking – ‘Which tag does which? what happens when I call ‘paginate objects’? How can I set the number of shown ‘objects’ for each page? How do I set the formatting of the page navigation?

You’ll find all you need right here.

We delve into this topic further: ‘How do I do ajax-style pagination?’, since that’s probably what you’ll be needing.

 

Ajax (Twitter Style) Pagination

 

Initial State

First, given that you have your views.py as:

def view_entries( request ):
    context = {}
    entries = Entry.objects.all()
    context.update( { 'entries' : entries } )
    return render_to_response('view_entries.html', context, 
        context_instance=RequestContext(request) )

And your template has:

{% block content %}
<h2>Viewing All Entries</h2>
<div>

{% for entry in entries %}
    
    New Entry!: {{ entry.name }} <br/>
{% endfor %}

</div>
{% endblock %}

Applying Ajax Style

Your view becomes this:

def view_entries( request,
    template = 'view_entries.html',
    page_template = 'view_entries_page.html' ):
    """ Apply Ajax-style Pagination
    parameter template is the actual page,
    parameter page_template is the template used to display the paginated elements

    """
    context = {}
    entries = Entry.objects.all()

    context.update( {
        'entries' : entries,
        'page_template': page_template,
    } )

    # override the template and use the 'page' style instead.
    if request.is_ajax():
        template = page_template

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

You will notice that your template will also have to be modified – this method requires that the template you used for the page be subdivided into two parts: the original template, and the ‘paginated’ element:

Main Template

{% block js %}
    {{ block.super }}
    <script src="/media/js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/media/js/endless/endless.js" type="text/javascript" charset="utf-8"></script>
{% endblock %}

{% block content %}
    original text
    <div class="endless_page_template">
    {% include page_template %}
    </div>
{% endblock %}

 

Paginated Template

<h2>Viewing All Entries</h2>
<div>

{% for entry in entries %}
    
    New Entry!: {{ entry.name }} <br/>
{% endfor %}


</div>

The method django-endless-pagination applies here is a practical application of the {% include template_name %} tag. There is an inherent synergistic relationship between pagination and template inclusion, and that synergy is shown by AJAX.

This relationship is displayed by the fact that by including ajax, paginated elements (entries and navigation) have to be updated more often than the rest of the page. Django-endless-pagination then builds around this concept – it reuses the ‘paginated template’ in a way that makes sense:

First, it reuses the view – it simply swaps in the paginated template as an ajax reply. This makes developer’s lives a lot easer, since views can easily be retroactively modified to provide ajax support.

Second, it uses the django template system. That means developers can modify the template and still affect the ajax result. That benefit alone gives developers a reason to use this strategy even if they’re not using django-endless-pagination.

On a personal note, this is truly a fantastic way of performing ajax on django templates – perhaps this could be used to apply ajax for forms that need ajax.

 

One More Thing

The tutorial left out one tidbit of information: In case you leave out the initial JS import, the resulting page will work as expected (and thus not have ajax functionality at all). However, during my testing, when I did the initial import of the JS – while still following all the tutorial steps – I encountered a problem with the navigation fields generated by . The navigation did not work at all.

As you might have already noticed, the div containing {% include page_template %} has the class endless_page_template. This is, in fact, the solution. For some reason or another, the tutorial (at least up to the point that you’ll need this information), leaves this out.

Other than that, django-endless-pagination is good stuff.

References

{%- endset -%} {%- set hs_blog_post_summary -%}

Twitter, Google, Facebook, Tumblr, and many other modern websites have many things in common – but none of these as useful as pagination. In some cases, users might not even see this feature as pagination, as there are no explicit pages actually being displayed – rather, the results are being loaded separate from the rest of the page – such as Tumblr and Facebook feeds, or Google Images results.

django-endless-pagination solves this problem for the django user – by encapsulating in a single app all the tools needed to provide ajax pagination support, django users can spend more time developing, and less time reinventing the wheel.

pip install django-endless-pagination

You’ll need at least python 2.5, Django 1.0, and jQuery 1.3.

Settings:

1. add endless_pagination to INSTALLED_APPS

2. add the context processor:

from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS
TEMPLATE_CONTEXT_PROCESSORS += (
    'django.core.context_processors.request',
)

Usage:

Provided your system is displaying the objects in your template

{% for object in objects %}
    
{% endfor %}

You can use endless-pagination like this:

{%- endset -%} {%- blog_post_data_wall_wrapper body={{hs_blog_post_body}}, summary={{hs_blog_post_summary}} %}

Similar posts

Get notified about the latest in Tech

Be the first to know about new tech from the experts at Bixly!