CODEWITHSUNDEEP
djangodjango-endless-pagination
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4509

Django endless pagination issue when rendering tables

I use Django endless pagination with additional data loading on scroll, and currently have the following code:

Main template:

<table>
    <thead>
        <th>Поставщик</th>
    </thead>
    <tbody>
        {% include 'my_app/template_paginator.html' %}
    </tbody>    
</table>

template_paginator.html

{% load el_pagination_tags %}
{% paginate my_formset %}
    {{ my_formset.management_form }}                     
    {% regroup my_formset by some_nice_field as grouped_formset %}
    {% for form in grouped_formset %}
        {% for f in form.list %}
            <tr><td><!-- Some stuff --></td></tr>
        {% endfor %}
    {% endfor %}    
{% show_more %}

I would be very happy with this, if it hadn't been for two issues:

  1. Show more link appears from above the table, not below as expected, and even more surprisingly, it becomes invisible after I press it once.
  2. Additional rows appear not only before the old ones, but even from above the table tag

I know that there's a ready Django solution for paginating tables (table2), but as for now, I would like to go for a pure-Django/HTML solution. Any ideas regarding what these two issues could stem from would be highly appreciated.

Upvotes: 0

Views: 571

Answers (1)

Edgar Navasardyan
Edgar Navasardyan

Reputation: 4509

Found this, which finally solved my question. Only one note from myself - works perfectly with more than one columns.

Find the show_more.html template, and replace the file's content with this.

{% load el_pagination_tags %}
{% paginate current_orders_queryset %}

{% for entry in current_orders_queryset %}
    <tr><td>Edgar</td><td>Lena</td><td>Edgar</td><td>Lena</td>
    </tr>   
{% endfor %}

{% show_more %}

Then, in the main template, write smth like this:

<table>
        <thead>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
        </thead>
        <tbody>
           {% include 'order_scheduler/order_draft_paginator.html' %}
        </tbody>
</table>
{% block js %}
{{ block.super }}
<script type="text/javascript" src="/static/js/el-pagination.js"></script>
<script type="text/javascript" src="/static/js/el-pagination_on_scroll.js"></script>
<script type="text/javascript" src="/static/js/el-pagination-endless.js"></script>
<script>$.endlessPaginate();</script>
{% endblock %}

And finally in the auxiliary template:

{% load el_pagination_tags %}
{% paginate current_orders_queryset %}

{% for entry in current_orders_queryset %}
    <tr><td>Edgar</td><td>Lena</td><td>Edgar</td><td>Lena</td>
    </tr>   
{% endfor %}

{% show_more %}

Upvotes: 0

Related Questions