Как построить django paginator с помощью ajax?

Question

Я сейчас пытаюсь построить django paginator с помощью ajax. Я просто попробовал простой способ, который использует $('#div_id').load() для загрузки списков статей. Но проблема моего кода в том, что paginator не обновлялся, что означает, что если у меня есть paginator типа «1,2,3, ..., 9,10», я могу загружать только списки статей со страницы 1,2, 3,9,10, и я не могу загрузить списки из 4-8, потому что в пагинаторе нет номеров страниц. Итак, как я могу сделать, чтобы решить эту проблему?

Мой View.py код:

class IndexView(ListView):
model = Article
template_name = "articles.html"
context_object_name = "article_list"
paginate_by = 2

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)

    paginator = context.get('paginator')
    page = context.get('page_obj')
    is_paginated = context.get('is_paginated')

    pagination_data = self.pagination_data(paginator, page, is_paginated)
    context.update(pagination_data)

    return context

def pagination_data(self, paginator, page, is_paginated):

    if not is_paginated:
        return {}

    left = []
    right = []

    left_has_more = False
    right_has_more = False

    first = False
    last = False

    page_now = page.number
    page_total = paginator.num_pages
    page_range = paginator.page_range

    if page_now == 1:
        right = page_range[page_now:page_now + 2]

        if right[-1]<page_total - 1:
            right_has_more = True
        if right[-1]<page_total:
            last = True
    elif page_now == page_total:
        left = page_range[(page_now - 3) if (page_now - 3) > 0 else 0:page_now - 1]

        if left[0] > 2:
            left_has_more = True
        if left[0] > 1:
            first = True
    else:
        left = page_range[(page_now - 3) if (page_now - 3) > 0 else 0:page_now - 1]
        right = page_range[page_now:page_now + 2]

        if right[-1] < page_total - 1:
            right_has_more = True
        if right[-1] < page_total:
            last = True

        if left[0]>2:
            left_has_more = True
        if left[0] > 1:
            first = True

    page_data = {
        'left':left,
        'right':right,
        'left_has_more':left_more,
        'right_has_more':right_more,
        'first':first,
        'last':last
    }
    return page_data

и мое html тело :

{% if is_paginated %}
        <div class="ui pagination menu" id="p_manu_num">
            {% if first %}
                <a class="item" name="1">1</a>
            {% endif %}
            {% if left %}
                {% if left_more %}
                    <div class="disabled item">...</div>
                {% endif %}
                {% for i in left %}
                    <a class="item" name="{{ i }}">{{ i }}</a>
                {% endfor %}
            {% endif %}
            <a class="item active" id="act" name="{{ page_obj.number }}"><b>{{ page_obj.number }}</b></a>
            {% if right %}
                {% for j in right %}
                    <a class="item" name="{{ j }}">{{ j }}</a>
                {% endfor %}
                {% if right_more %}
                    <div class="disabled item">...</div>
                {% endif %}
            {% endif %}
        {% if last %}
            <a class="item" name="{{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
        {% endif %}
    </div>
    {% endif %}

my HTML-скрипты is:

    $('#p_manu_num a').on('click', function () {
    var art_url = "?page=" + $(this).attr('name') +" #blog_content_arts"
    $('#blog_content_arts').load(art_url).transition('fade in')
})

Буду очень признателен, если вы сможете мне помочь!

Answer 1

Не нужно изобретать велосипед! Django имеет встроенную нумерацию страниц, которая значительно облегчит выполнение того, что вы пытаетесь сделать.

Посмотрите на это: https://docs.djangoproject.com/en/2.2/topics/pagination/#using-paginator-in-a-view

Вы можете использовать код в примере для визуализации response, а затем добавить его в DOM с помощью JS.