Search code examples
djangodjango-endless-pagination

django-endless-pagination twitter-style


I'm trying to implement django-endless pagination on my project. Simple pagination works (with "show more" ) but twitter style (ajax based) is giving me troubles.

This is my view:

@page_template('userena/profil_page.html')  # just add this decorator
def public_details(request, username=None,
    template = 'userena/profil.html', extra_context=None):
    user = get_object_or_404(get_user_model(), username__iexact=username)

    userObjekat = User.objects.get(username=username)
    user_profil = userObjekat.get_profile()

    context = {
        'projekti': user_profil.projekat_set.all(),
    }
    if extra_context is not None:
        context.update(extra_context)

    return userena_views.profile_detail(request, extra_context=context, username=username, template_name='userena/profil.html')

As suggested, my templates are broken down into 2 pieces, "main" one and AJAX one. This is a part of the main template, which loads the _page template:

</li>
{% include page_template %}
</li>

and _page template GETS INCLUDED - I can see the content.

_page template:

{% load endless %}
<li id="projektiTab">
    <div class="ten columns">
    <ul class="accordion">
    {% paginate projekti %}
    {% for projekat in projekti %}
    <li>                        
        <div class="title">
            <h6> {{ projekat.naziv }}</h6>
        </div>
        <div class="content">
            <p>{{ projekat.opis }}</p>
        </div>
    </li>
    {% endfor %}
    {% show_more %}
<li>
</div>
</li>

Javascripts get loaded also ( STATIC_URL is working ) and in the page source I use:

<script src="/static/js/endless-pagination.js"></script>
        <script>
        $.endlessPaginate({
            paginateOnScroll: true,
            paginateOnScrollChunkSize: 5
        });
        </script>

After all this, pagination by scroll is not working. What am I doing wrong?


Solution

  • There were a couple of "small" mistakes made by me of course, which seemed insignificant, but they aren't.

    Main template, or parent template which holds the page_template, should contain something like this:

    <div class="endless_page_template">
        {% include page_template %}
    
        {% block js %}
        {{ block.super }}
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="{{ STATIC_URL }}js/endless-pagination.js"></script>
        <script>$.endlessPaginate();</script>
        {% endblock %}
    </div>
    

    So, it must be in a div with that specific class, which I overlooked yesterday.

    page_template looks something like this:

    {% load endless %}
    
    {% paginate projekti %}
    {% for projekat in projekti %}
       {{ projekat.name }}
    {% endfor %}
    {% show_pages %}
    

    This of course can be prettified with some HTML (in my case Zurb Foundation's accordion element). And last but not the least - the view:

    @page_template('userena/profil_strana.html')  # name of the page_template
    def public_details(request, username=None,
        template = 'userena/profil.html', extra_context=None):
    
        userObjekat = User.objects.get(username=username) # getting user object
        user_profil = userObjekat.get_profile() # getting user's profile
        context = {
            'projekti': user_profil.projekat_set.all(), # and a list of objects to iterate thru
        }
        if extra_context is not None:
            context.update(extra_context)
    
        return userena_views.profile_detail(request, extra_context=context, username=username, template_name=template)
    

    And it works.