如何将分页添加到第三个 Django 代码？

Question

我有一个系统，用户可以在其中查看他们在一个页面上注册的投诉。但问题是页面上一次只能看到四个投诉。如何在代码中添加 pageinator，以便可以在其他页面上以正确的格式和模板查看接下来的四个投诉：

views.py:

def History(request):
  complaint_data = Complaint.objects.filter(user=request.user) 
  context = { 'complaint':complaint_data }
  return render(request, 'myHistory.html', context)

模板：

<!-- Middle Container -->
    <div class="col-lg middle middle-complaint-con">
        <i class="fas fa-folder-open fa-4x comp-folder-icon"></i>
        <h1 class="all-comp">My Complaints</h1>
        <p class="all-comp-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        {%for c in complaint %}
        <a href="{% url 'Complaint' c.pk %}" style="color:black;">
            <div class="container comp-con-{{forloop.counter0}}">
                <p style="color: #D37A19; margin-left: -130px; margin-top: -5px;">Report number:</p>
                <p class="history-level-1">{{c.reportnumber}}</p>
                <p class="comp-title-1">{{c.event_type}}</p>
                <p class="comp-sub-1">{{c.event_text|truncatechars:85}}</p>
            </div>
        </a> {%endfor%}
    </div>

css:

enter code h.comp-con-0 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 11px 8px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 160px;
        top: 190px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
        border-radius: 10px;
    }
    
    .comp-con-1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 160px;
        top: 400px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    }
    
    .comp-con-2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 610px;
        top: 190px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    }
    
    .comp-con-3 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px 9px;
        position: absolute;
        width: 300px;
        height: 140px;
        left: 610px;
        top: 400px;
        background: #FFEEDB;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
    }

我基本上是四张css卡四次投诉，有一张for.loopcounter来统计html中的投诉。当页面更改为新页面时，如何将 forloopcounter 设置回零。更重要的是，如何为此添加分页？

Answer 1

对于分页，您应该考虑 Django 文档 https://docs.djangoproject.com/en/3.2/topics/pagination/

from django.core.paginator import Paginator
def pagination_complaint(request, page_no):
    complaint_data_paginator = Paginator(complaint_data, 4)
    paginator_obj = complaint_data_paginator.get_page(page_no)
    context = {'complaint':paginator_obj}
    return render(request, "<your-app-name>/ajax_complaint.html", context)

在您的应用中创建一个新模板 ajax_complaint.html

{%for c in complaint %}
        <a href="{% url 'Complaint' c.pk %}" style="color:black;">
            <div class="container comp-con-{{forloop.counter0}}">
                <p style="color: #D37A19; margin-left: -130px; margin-top: -5px;">Report number:</p>
                <p class="history-level-1">{{c.reportnumber}}</p>
                <p class="comp-title-1">{{c.event_type}}</p>
                <p class="comp-sub-1">{{c.event_text|truncatechars:85}}</p>
            </div>
        </a> {%endfor%}

在 urls.py 中创建一个新的 URL 以获得分页！

path('<int:page_no>/', pagination_complaint)

现在您必须在第一个模板中添加 ajax！要在模板中添加数据，请添加一个带有 id="items" 的新 div（它可以是任何东西，但我正在使用它）现在我要在这里使用jQuery！所以一定要在模板中导入它！

items = document.getElementsById("items");
  $.ajax(
{
    type: "GET",
    URL: "<your pagination URL>/<page_no>/",
    success: function (response) {
      items.innerHTML = items.innerHTML + response
    }
})

如何将分页添加到第三个 Django 代码？

How do I add paginator to thid django code?

django

django-templates

django-models

django-forms

django-views