使用Ajax进行Django分页

时间:2019-02-26 22:10:11

标签: ajax django pagination

我正在尝试显示一个HTML表,该表每3秒动态更新一次。在一些帮助下,我设法使此部分正常工作,但是,一旦数据库变大,就需要分页。 Django-Pagination非常简单,但是我很难使它与其他Ajax复杂性一起使用。 我看了相关的SO问题,但是它们要么很老,要么没有答案。 代码: index.html

{% extends 'app/base.html' %}
{%load staticfiles %}
{% block body_block %}
    <div class="container" >

        {% if elements %}
            <table id="_appendHere" class="table table-bordered">

                <tr>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                    <th>D</th>
                    <th>User</th>
                    <th>Date</th>
                </tr>

                {% for e in elements %}
                    <tr>
                        <td><a href="{{ e.A.url }}">{{e.A}}</a></td>
                        <td><a href="{{ e.B.url }}">{{e.B}}</a></td>
                        <td>{{ e.C }}</td>
                        <td>{{ e.D }}</td>
                        <td>{{ e.User  }}</td>
                        <td>{{ e.Date }}</td>

                    </tr>
                {% endfor %}  
            </table>

        {% else %}
            No data to display! <br/>

        {% endif %}
    </div>
{% endblock %}

<script>

setInterval(function() {
    $.ajax({
        type: "GET",
        url: "get_more_tables/",  // URL to your view that serves new info
    })
    .done(function(response) {
        $('#_appendHere').append(response);

    });
}, 1000)

</script>

views.py

def paginate(input_list, request):
    page = request.GET.get('page', 1)
    paginator = Paginator(input_list, 10)
    elements = paginator.page(page)

    return {'elements': elements}

def index(request):

    elements = ElementFile.objects.all().order_by('-upload_date')
    context_dict = {'elements':elements}

    response = render(request,'app/index.html',context_dict)
    return response

def get_more_tables(request):
    elements = ElementFile.objects.all().order_by('-upload_date')
    context_dict = paginate(elements, request)
    return render(request, 'app/get_more_tables.html', context_dict)

get_more_tables.html

<tbody>
<table>
<tr><...corresponding th blocks omitted...></tr>

{% for e in elements %}
    <tr>
        <td><a href="{{ e.A.url }}">{{e.A}}</a></td>
        <td><a href="{{ e.B.url }}">{{e.B}}</a></td>
        <td>{{ e.C }}</td>
        <td>{{ e.D }}</td>
        <td>{{ e.User  }}</td>
        <td>{{ e.Date }}</td>
    </tr>
{% endfor %}

</tbody>
</table>

            {% if e.has_other_pages %}
                <ul class="pagination">
                    {% if e.has_previous %}
                        <li><a class = "pag" href="?page={{ e.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&laquo;</span></li>
                    {% endif %}
                    {% for i in e.paginator.page_range %}
                        {% if e.number == i %}
                            <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                        {% else %}
                            <li><a class = "pag" href="?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {% if e.has_next %}
                        <li><a class = "pag" href="?page={{ e.next_page_number }}">&raquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
                </ul>
            {% endif %}

urls.py

urlpatterns = [
    path('', views.index, name=''),
    path('get_more_tables/', views.get_more_tables, name='get_more_tables'),
        ]

当前,该表正在自动更新,并已分页。但是,如果我单击“下一步”或2-10之间的页码,它只会重新加载第一页。我也尝试将分页器代码复制到index.html,但这也无济于事。 我注意到,如果我到达get_more_tables?page = 2,那么在那里我会看到正确的数据。 如何使用这种Ajax复杂性加载分页数据? 非常感谢任何可以帮助您的人。已经被困了好几天了。

0 个答案:

没有答案