How to split template for the given link for pagination :

Question

Given this link for twitter-style pagination in Django. I'm trying to implement the same in my app but can't understand the splitting of template. I'm giving here the code of my HTML page for which I want to apply the pagination . Can anyone please help me by answering to what should I write in the two templates one is entry_index.html and other is entry_index_page.html(as mentioned in the link) according to my HTML code?

Below is my code to html page for which I'm applying pagination :

{% extends 'talks/base.html' %}
{% block content  %}
<!-- .header-bottom-wrapper -->
<div class="header-bottom-wrapper">
<div class="container">
    <div class="row">
        <!-- Page Head -->
        <div class="page-head col-lg-12">
            <h2 class="page-title">Gallery</h2>
        </div>
        <!-- End Page Head -->
    </div>
    </div>
    </div><!-- End of .header-bottom-wrapper -->

 <!-- page-container -->
<div class="page-container container">

<!-- Gallery Filter -->

<div id="gallery-container">
    <div class="row gallery-4-columns isotope clearfix">


    {% for photo in pics %}
        <div class="gallery-item isotope-item issues  col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <figure>
                <a class="zoom swipebox" href="{{photo.image.url}}" title="{{photo.title}}"></a>
                <div class="media_container"></div>
                <img src="{{photo.image.url}}" alt="{{photo.title}}" width="346px" height="200px">
            </figure>
        </div>
    {% endfor %}
    </div>

</div>

</div><!-- End of .page-container -->

{% endblock %}

Andrei Todo · Answer 1 · 2016-10-12T12:11:58.523

In entry_index.html:

{% extends 'talks/base.html' %}
{% block content  %}
<!-- .header-bottom-wrapper -->
<div class="header-bottom-wrapper">
<div class="container">
    <div class="row">
    <!-- Page Head -->
    <div class="page-head col-lg-12">
        <h2 class="page-title">Gallery</h2>
    </div>
    <!-- End Page Head -->
</div>
</div>
</div><!-- End of .header-bottom-wrapper -->

<!-- page-container -->
<div class="page-container container">

<!-- Gallery Filter -->

<div id="gallery-container">
    <div class="row gallery-4-columns isotope clearfix">

{%include page_template %}

</div>

You see I excluded the for loop, I replaced it with

{%include page_template %}

Put the for loop in entry_index_page.html. Don't forget to define the page_template variable like here: https://django-endless-pagination.readthedocs.io/en/latest/twitter_pagination.html#split-the-template

Here's my try when I first tested django-endless-pagination, it's a simple display of a list of photos with 'show more' button :

{%  load el_pagination_tags %}
{% paginate photos %}
   {% for photo in photos %}
       <div class="well col-xs-12 col-md-8 col-md-offset-2">
            <div class="row">{{ forloop.counter }}</div>
            <div class="row">{{ photo.description }}</div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="{{ photo.image.url }}" class="img-responsive">
                    </div>
                </div>
            </div>

       </div>

    {% endfor %}
{% show_more %}

Tried this. Now I am getting display of my first 10 (of 13) objects, but when I click on show more, the next 3 objects get overlapped on the first 3 ones — Prakrati Dangarh, Oct 14 '16 at 11:16
Since you get the next 3 objects after the first 3 objects, it seems that the pagination works well. Pls add/remove the class attributes in the example to fit your needs. Relevant for pagination are the load, paginate and show_more template tags. — Andrei Todo, Oct 17 '16 at 07:35

How to split template for the given link for pagination :

1 Answers1