I'm trying to add the paginate option on my posts page from my blog website. I want to implement the paginator on my view function that renders the page and I found this exemple from Django's doc but it doesn't work. Any help ?
view function:
def blog(request):
posts = Post.objects.all().order_by('-date_posted')
paginator = Paginator(posts, 2)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
context = {
'posts': posts,
'page_obj': page_obj,
'title': 'Blog',
'banner_page_title': 'Blog',
'page_location': 'Home / Blog'
}
return render(request, 'blog/blog.html', context)
html rendering
<nav class="blog-pagination justify-content-center d-flex">
<ul class="pagination">
{% if is_paginated %}
{% if page_obj.has_previous %}
<li class="page-item">
<a href="?page={{ page_obj.previous_page_number }}" class="page-link" aria-label="Previous">
<span aria-hidden="true">
<span class="ti-arrow-left"></span>
</span>
</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active">
{{ num }}
</li>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<li class="page-item">
{{ num }}
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a href="?page={{ page_obj.next_page_number }}" class="page-link" aria-label="Next">
<span aria-hidden="true">
<span class="ti-arrow-right"></span>
</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</nav>
the url route
path('blog/', blog, name='blog'),
Remove the {% if is_paginated %} as it isn't returning any value and that is why you don't see any of the numbers (don't forget to remove the closer if {% endif %})
You can access your paginated objects from the page_obj
{% for post in page_obj %}
{{ post }}
{% endfor %}
Here is the HTML with the changes
{% for post in page_obj %}
{{ post.text }}<br>
{% endfor %}
<nav class="blog-pagination justify-content-center d-flex">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a href="?page={{ page_obj.previous_page_number }}" class="page-link" aria-label="Previous">
<span aria-hidden="true">
<span class="ti-arrow-left"></span>
</span>
</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active">
{{ num }}
</li>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<li class="page-item">
{{ num }}
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a href="?page={{ page_obj.next_page_number }}" class="page-link" aria-label="Next">
<span aria-hidden="true">
<span class="ti-arrow-right"></span>
</span>
</a>
</li>
{% endif %}
</ul>
</nav>
Related
class ProductList(ListView):
model = Product
paginate_by = 8
def company_page(request, slug):
...
product_list = Product.objects.filter(company=company).order_by('-pk')
paginator = Paginator(product_list, 4)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
return render(request, 'product/product_list.html', {
...,
'product_list': product_list,
'page_obj': page_obj
})
views.py
<nav aria-label="Pagination">
<ul class="pagination justify-content-center my-5">
{% if page_obj.has_previous %}
<li class="page-item mx-auto lead">
<a class="page-link" href="?page={{page_obj.previous_page_number}}" tabindex="-1" aria-disabled="true">
Newer</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
Newer</a>
</li>
{% endif %}
{% if page_obj.has_next %}
<li class="page-item mx-auto lead">
<a class="page-link" href="?page={{page_obj.next_page_number}}">
Older</a>
</li>
{% else %}
<li class="page-item disabled mx-auto lead">
<a class="page-link" href="#!">
Older</a>
</li>
{% endif %}
</ul>
</nav>
product_list.html
I added pagination on ProductList view with paginated_by and imported Paginator to make other pages using a function view but it's only paginated on ProductList view and doesn't work on company_page view. The Newer & Older buttons work but the page keeps showing every product_list objects. How can I make it work on all pages?
Try this:
views.py
# other views ...
def company_page(request, slug):
product_list = Product.objects.filter(company=company).order_by('-pk')
page = request.GET.get('page', 1)
paginator = Paginator(product_list, 4)
try:
Products = paginator.page(page)
except PageNotAnInteger:
Products = paginator.page(1)
except EmptyPage:
Products = paginator.page(paginator.num_pages)
context = {'Products': Products}
return render(request, 'product/product_list.html', context)
product_list.html
<nav aria-label="Pagination">
{% if Products.has_other_pages %}
<ul class="pagination justify-content-center my-5">
{% if Products.has_previous %}
<li class="page-item mx-auto lead">
<a class="page-link" href="?page={{ Products.previous_page_number }}" tabindex="-1" aria-disabled="true">
Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
Previous</a>
</li>
{% endif %}
{% for i in Products.paginator.page_range %}
{% if Products.number == i %}
<li class="page-item mx-auto lead">
<a class="page-link" href="?page={{ i }}">
{{ i }}</a>
</li>
{% endif %}
{% endfor %}
{% if Products.has_next %}
<li class="page-item mx-auto lead">
<a class="page-link" href="?page={{ Products.next_page_number }}">
Next</a>
</li>
{% else %}
<li class="page-item disabled mx-auto lead">
<a class="page-link" href="#!">
Next</a>
</li>
{% endif %}
</ul>
{% endif %}
</nav>
I have a template which includes 4 different paginators that only differ in context variables (tasks_today, tasks_tomorrow, ... etc.), and I want to minimise code repetition so I don't have 4 different paginator templates.
Template:
<div class="wrapper">
<h3>Today</h3>
<table>
{% if tasks_today %}
{% for task in tasks_today %}
{% include 'todo/task_table_row.html' %}
{% endfor %}
{% include 'todo/paginator_today.html' %}
{% else %}
<p>No tasks for today.</p>
{% endif %}
</table>
<h3>Tomorrow</h3>
<table>
{% if tasks_tomorrow %}
{% for task in tasks_tomorrow %}
{% include 'todo/task_table_row.html' %}
{% endfor %}
{% include 'todo/paginator_tomorrow.html' %}
{% else %}
<p>No tasks for tomorrow.</p>
{% endif %}
</table>
<h3>Upcoming</h3>
<table>
{% if tasks_upcoming %}
{% for task in tasks_upcoming %}
{% include 'todo/task_table_row.html' %}
{% endfor %}
{% include 'todo/paginator_upcoming.html' %}
{% else %}
<p>No upcoming tasks.</p>
{% endif %}
</table>
<h3>Past</h3>
<table>
{% if tasks_past %}
{% for task in tasks_past %}
{% include 'todo/task_table_row.html' %}
{% endfor %}
{% include 'todo/paginator_past.html' %}
{% else %}
<p>No tasks in the past.</p>
{% endif %}
</table>
</div>
paginator_today:
{% load url_replace %}
{% if tasks_today %}
<div class='paginator'>
<nav aria-label="Page navigation">
<ul class="pagination">
{% if tasks_today.has_previous %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_today=1 %}" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">begin</span>
</a>
</li>
{% endif %}
{% for n in tasks_today.paginator.page_range %}
{% if tasks_today.number == n %}
<li class="page-item active">
<span class="page-link">{{ n }}
<span class="sr-only">(current)</span>
</span>
</li>
{% elif n > tasks_today.number|add:'-3' and n < tasks_today.number|add:'3' %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_today=n %}">{{ n }}</a>
</li>
{% endif %}
{% endfor %}
{% if tasks_today.has_next %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_today=tasks_today.paginator.num_pages %}" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">end</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
paginator_tomorrow:
{% load url_replace %}
{% if tasks_tomorrow %}
<div class='paginator'>
<nav aria-label="Page navigation">
<ul class="pagination">
{% if tasks_tomorrow.has_previous %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_tomorrow=1 %}" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">begin</span>
</a>
</li>
{% endif %}
{% for n in tasks_tomorrow.paginator.page_range %}
{% if tasks_tomorrow.number == n %}
<li class="page-item active">
<span class="page-link">{{ n }}
<span class="sr-only">(current)</span>
</span>
</li>
{% elif n > tasks_tomorrow.number|add:'-3' and n < tasks_tomorrow.number|add:'3' %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_tomorrow=n %}">{{ n }}</a>
</li>
{% endif %}
{% endfor %}
{% if tasks_tomorrow.has_next %}
<li class="page-item">
<a class="page-link" href="?{% url_replace page_tomorrow=tasks_tomorrow.paginator.num_pages %}" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">end</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
What can I do?
url_replace.py:
from django.utils.http import urlencode
from django import template
register = template.Library()
#register.simple_tag(takes_context=True)
def url_replace(context, **kwargs):
query = context['request'].GET.dict()
query.update(kwargs)
return urlencode(query)
You can use the with keyword to set certain variables inside your include template:
{% include 'todo/paginator.html' with tasks=tasks_today page='page_today' %}
You can then replace references to tasks_today in you paginator template to tasks, as well as the reference to page_today to page
Edit: The call to url_replace is problematic, since it uses kwargs, and a call like {% url_replace page_today = x %}, will be equivalent to a call to urlreplace(context, **{'page_today' : x}).
Simply calling url_replace with page = x will not work correctly, since it will pass a keyword argument with the name of page instead of the value of page
The naive solution would be to pass a page variable to the paginator.html and call {% urlreplace **{page : 20} %}, but the Django template engine does not allow packing kwargs.
I think the best way to go here is to create a url_replace_single function, since in this use case you only replaces one value.
To do this, you'll need to define a field and value parameter on you url_replace function:
#register.simple_tag(takes_context=True)
def url_replace(context, field, value, **kwargs):
query = context['request'].GET.dict()
query_dict = { field : value}
query.update(query_dict)
return urlencode(query)
Then call the function from your template like this:
{% url_replace field=page value=x %}
The only downside is that this will only let you replace one query parameter in your url.
This code already have done the pagination ,but it false because per page it shows all items in the database ,and the same in other pages
This is the routing
#app.route('/shop/page/<int:page_num>')
def shop(page_num):
products=Product.query.filter
(Product.category.has(Product.category_id))
shopPage=Product.query.paginate
(page=page_num,per_page=5,error_out=True)
return render_template('shop.html',
shopPage=shopPage,products=products)
And this is the HTML code of pagination and the output products of database
{% block content %}
<div class="mb-5">
{% for product in products %}
<div class="col-4 mt-3 ">
<div class="card">
<div class="card-header">
<form method="POST" action="{{ url_for('shop') }}" >
</form>
</div>
<div class="card-body">
<h5 class="card-title">{{product.name }}</h5>
<p class="card-text">
<div>Category: {{ product.category.name }}</div>
<div>Price: {{ product.price }} $</div>
<div>Company: {{ product.company }}</div>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% for page in shopPage.iter_pages(left_edge=2, right_edge=2, left_current=1, right_current=2) %}
{% if page %}
<nav >
<ul class="pagination ">
<li class="page-item ">
<a class="page-link" href="{{url_for('shop',page_num=page)}}" tabindex="-1">{{ page }}</a>
</li>
</ul>
</nav>
{% else %}
...
{% endif %}
{% endfor %}
{% endblock %}
When I use pagination with a very large dataset, it works too slow. Maybe I am not implementing it properly. Please help. How to make it fast? Is there anything that I can change or implement so that it works fine?
view.py
def display(request):
user_list = Final.objects.all()
searchlen= user_list.count()
paginator = Paginator(user_list, 100)
page = request.GET.get('page')
users = paginator.get_page(page)
return render(request,'displayLogs.html',{'users': users,'searchlen':searchlen})
model.py
class Final(models.Model):
name = models.TextField(db_column='Date',primary_key=True, blank=True, null=False) # Field name made lowercase.
corr = models.TextField(db_column='CorrelationId', blank=True, null=True) # Field name made lowercase.
<tbody>
<tr class="gradeX">
{% for item in users %}
<td>{{item.dat}}</td>
<td>{{item.act}}</td>
<td>{{item.actor}}</td>
<td class="center">{{item.tar}}</td>
</tr>
{% endfor %}
</tbody>
<div class="pagination" style="border-style:inset;border-width:5px;padding-bottom: 5px">
{% if users.has_previous %}
<a class="pagination-action" href="?page=1"> <i class="fas fa-angle-double-left"></i></a>
<a class="pagination-action" href="?page={{ users.previous_page_number}}"> <i class="fas fa-angle-left"></i></a>
{% endif %}
{% for num in users.paginator.page_range %}
{% if users.number == num %}
<span class="pagination-number pagination-current"><strong>{{ num }}</strong></span>
{% elif num > users.number|add:'-3' and num < users.number|add:'3' %}
<a class="pagination-number" href="?page={{ num }}">{{num}}</a>
{% endif %}
{% endfor %}
{% if users.has_next %}
<a class="pagination-action" href="?page={{ users.next_page_number }}"><i class="fas fa-angle-right"></i></a>
<a class="pagination-action" href="?page={{ users.paginator.num_pages }}"> <i class="fas fa-angle-double-right"> </i></a>
{% endif %}
</div>
I suggest doing something like this for large dataset. I attach my design as given below. Here click << to go first page , >> to go last page , < to go previous page and > to go next page.
<tbody>
{% for item in users %}
<tr class="gradeX">
<td>{{item.dat}}</td>
<td>{{item.act}}</td>
<td>{{item.actor}}</td>
<td class="center">{{item.tar}}</td>
</tr>
{% endfor %}
</tbody>
<nav aria-label="pagination" class="pagination_area">
<div class="row">
{% if users.end_index > 0 %}
<div class="col-sm-12 col-md-5 d-none d-md-block">
<p>Showing {{ users.start_index }} to {{ users.end_index }} of {{ users.paginator.count}}.</p>
</div>
{% endif %}
{% if users.paginator.num_pages > 1 %}
<div class="col-sm-12 col-md-7 dataTables_pager">
<ul class="pagination">
{% if users.has_previous %}
<li class="page-item">
<a class="page-link" data-page="1" href="?page={{ users.previous_page_number }}">
<i class="fa fa-angle-double-left"></i>
</a>
</li>
{% if users.previous_page_number > 1 %}
<li class="page-item">
<a class="page-link " data-page="{{users.previous_page_number}}" href="?page={{ users.previous_page_number }}">
<i class="fa fa-angle-left"></i>
</a>
</li>
{% endif %}
{% endif %}
{% if users.previous_page_number > 2 %}
<li class="page-item">
<a class="page-link " data-page="{{users.number|add:'-2'}}" href="?{{users.number|add:'-2'}}"> {{ users.number|add:"-2" }} </a>
</li>
<li class="page-item">
<a class="page-link " data-page="{{users.number|add:'-1'}}" href="?page={{users.number|add:'-1'}}"> {{ users.number|add:"-1" }} </a>
</li>
{% endif %}
<li class="page-item active"><span class="page-link ">{{ users.number }}</span></li>
{% if users.paginator.num_pages > users.number|add:"2" %}
<li class="page-item">
<a class="page-link " data-page="{{users.number|add:'1'}}" href="?page={{users.number|add:'1'}}"> {{ users.number|add:"1" }} </a>
</li>
<li class="page-item">
<a class="page-link " data-page="{{users.number|add:'2'}}" href="?page={{users.number|add:'2'}}"> {{ users.number|add:"2" }} </a>
</li>
{% endif %}
{% if users.has_next %}
<li class="page-item">
<a class="page-link " data-page="{{users.next_page_number}}" href="?page={{ users.next_page_number }}">
<i class="fa fa-angle-right"></i>
</a>
</li>
<li class="page-item">
<a class="page-link " data-page="{{users.paginator.num_pages}}" href="?page={{users.paginator.num_pages}}">
<i class="fa fa-angle-double-right"></i>
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
</div>
</nav>
This is my design. You can change design for your requirement.
I have developed a django application. I added a paginator block to a webpage. It is placed on the wrong position. Instead, i want it to be placed below the list which is being shown. Actually, I am displaying group list on the page. Per page, only 5 group names will be displayed. Using pagination, i did that. But the problem is i am unable to place it in a correct position. I am attaching an image of the page.
The html page for this is:
{% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
<div class="content">
{% if user.is_authenticated %}
<h2>
Welcome back
#{{user.username }}
</h2>
{% endif %}
<h2>Groups</h2>
<p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
</div>
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus-sign"></span> Create New Group!
{% endif %}
</div>
{% endblock %}
{% block group_content %}
<div class="col-md-8">
<div class="list-group">
{% for group in object_list %}
<a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
<h3 class="title list-group-item-heading">{{ group.name }}</h3>
<div class="list-group-item-text container-fluid">
{{ group.description_html|safe }}
<div class="row">
<div class="col-md-4">
<span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
</div>
<div class="col-md-4">
<span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
{% block pagination %}
{% if is_paginated %}
<ul class="pagination" style="display:inline-block">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
{% endblock %}
{% endblock %}
The pagination code should be inside the col-md-8 div tag like below ::
{% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
<div class="content">
{% if user.is_authenticated %}
<h2>
Welcome back
#{{user.username }}
</h2>
{% endif %}
<h2>Groups</h2>
<p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
</div>
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus-sign"></span> Create New Group!
{% endif %}
</div>
{% endblock %}
{% block group_content %}
<div class="col-md-8">
<div class="list-group">
{% for group in object_list %}
<a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
<h3 class="title list-group-item-heading">{{ group.name }}</h3>
<div class="list-group-item-text container-fluid">
{{ group.description_html|safe }}
<div class="row">
<div class="col-md-4">
<span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
</div>
<div class="col-md-4">
<span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% block pagination %}
{% if is_paginated %}
<ul class="pagination" style="display:inline-block">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
{% endblock %}
</div>
{% endblock %}