How do I add paginator to thid django code? - django

Question

I have a system where users can view complaints they have registered on one page. But the problem is that only four complaints can be viewed at a time on the page. How can I add pageinator to the code so that the next four complaints can be viewed on the other page in the correct format and template:
views.py:
def History(request):
complaint_data = Complaint.objects.filter(user=request.user)
context = { 'complaint':complaint_data }
return render(request, 'myHistory.html', context)
template:
<!-- 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;
}
I basically four css cards for four complaints and have a for.loopcounter to count the complaints in the html. How can I set the forloopcounter back to zero when the page changes to a new one. More importantly how do I add pagination to this?

Answer 1

For Pagination You Should Consider Django Documentation 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)
Create a new template in your app as 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%}
create a new URL in urls.py for getting pagination!
path('<int:page_no>/', pagination_complaint)
now in your first template you have to add the ajax!
For adding data in the template add a new div with id="items" (it can be anything but I am using it)
Now I am going to use jQuery here! so make sure to import it in the template!
items = document.getElementsById("items");
$.ajax(
{
type: "GET",
URL: "<your pagination URL>/<page_no>/",
success: function (response) {
items.innerHTML = items.innerHTML + response
}
})