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 %}
Related
I tried to do Pagination using for and if and it didn't work
So how do I do that
this an image that can show u
front page image
page 2 image
front page code
{% for post in posts %}
{% if forloop.counter <= 2 %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% endif %}
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
page 2 code
{% for post in posts %}
{% if forloop.counter2 <= 30 %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% endif %}
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
so pls help
i did this but its not work no posts show in the page 2
Here is how you can approach this using the Paginator class provided by Django.
from django.core.paginator import Paginator
from django.shortcuts import render
from yourApp.models import Post
def frontpage(request):
posts = Post.objects.all()
paginator = Paginator(posts, 3) # Show 3 posts per page or 10 to show 10 posts.
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
return render(request, 'posts/frontpage.html', {'page_obj': page_obj})
Now in your frontedend html page all you have to do is make this minor change and your html code will look like this
{% for post in page_obj %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
Now the next thing is just style the pagination div. I hope this will solve your pagination issue. Thank you
So I'm trying to make a button which highlights as active when the page is the same as page number, but it does not work, It only highlights page 1, When I go to page 2 then page 1 is still highlighed, index function handles the page I'm talking about.
views.py
from django.shortcuts import render
from .models import Listing
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
# Create your views here.
def index(request):
listings = Listing.objects.all()
paginator = Paginator(listings, 3)
page = request.GET.get('page')
paged_listings = paginator.get_page(page)
params = {'listings':paged_listings}
return render(request, 'listings/listings.html', params)
def listing(request, listing_id):
return render(request, 'listings/listing.html')
def search(request):
return render(request, 'listings/search.html')
listings.html
{% extends 'base.html' %}
{% block content %}
{% load humanize %}
<!-- Breadcrumb -->
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'index' %}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active"> Browse Listings</li>
</ol>
</nav>
</div>
</section>
<!-- Listings -->
<section id="listings" class="py-4">
<div class="container">
<div class="row">
{% if listings %}
{% for listing in listings %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">${{ listing.price | intcomma}}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i>{{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i>Sqfit: {{ listing.sqft }}</div>
<div class="col-6">
<i class="fas fa-car"></i>Garage: {{ listing.garage }}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i>Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i>Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i>{{ listing.realtor.name }}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i>{{ listing.list_date | timesince }}</div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>No Listings Available</p>
</div>
{% endif %}
<!-- Footer -->
<div class="row">
<div class="col-md-12">
{% if listings.has_other_pages %}
<ul class="pagination">
{% if listings.has_previous %}
<li class="page-item">
«
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">«</a>
</li>
{% endif %}
</ul>
{% endif %}
{% for i in listings.paginator.page_range %}
{% if listings.number == i %}
<li class="page-item active">
<a class="page-link page-item">{{ i }}</a>
</li>
{% else %}
<li class="page-item">
{{i}}
</li>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}
You mistyped argument in page links. Just replace
<li class="page-item">
{{i}}
</li>
with
<li class="page-item">
{{i}}
</li>
(difference is equal sign = between query parameter and value)
The problem seems to be your use of
{% for i in listings.paginator.page_range %}
As this is returning a range, I think you should be using:
{% for i in listings.paginator %}
I'm trying to use the paginator inbuild Django module so that the user can pass the pages. The problem is that I've configured everything as it should, but the pages numbers are not displaying. The place where it should have the numbers is entirely blank. Why can that due to?
Home Shop
Shop
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in items %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if items.paginator.num_pages > 1 %}
<ul>
{% if items.has_previous %}
<li><</li>
{% endif %}
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
{% if items.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
views.py:
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'items': Item.objects.all(),
'page': page
}
return render(request, 'ecommerceapp/shop.html', context)
Any help i would really appreciate it. I've been trying to fix this issue for a while.
You have to use your posts object.
view.py
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'posts': posts
}
return render(request, 'ecommerceapp/shop.html', context)
template.html
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in posts %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if posts.paginator.num_pages > 1 %}
<ul>
{% if posts.has_previous %}
<li><</li>
{% endif %}
{% for i in posts.paginator.page_range %}
<li>{{ i }}</li>
{% endfor %}
{% if posts.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
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 %}
Need recommendations or little help how to list insert in columns using Django built-in Pagination and Bootstrap.
For example. I have list with pagination. Every page have for example 9 results. But it all is in one column. I want to using Bootstrap row/column (col-md-4) to insert this list in 3 columns/3 rows. Is that with django Pagination possible or not? How? Or what you recommend?
This is my template code, where i make 3 columns with bootstrap. But all columns have 9 results and all column results are the same!
{% if project %}
<div class="container">
<div class="row">
<div class="col-md-4">
{% for projects in project %}
<li>
<a href="{{ current_page.get_absolute_url }}{{ project.slug }}">
<img src="{{ projects.main_image.image|thumbnail_url:'projects_top_thumbnail' }}" alt="{{ projects.title }}" />
<div class="showcase-title">
{{ projects.title }}
</div>
</a>
</li>
{% endfor %}
</div>
<div class="col-md-4">
{% for projects in project %}
<li>
<a href="{{ current_page.get_absolute_url }}{{ project.slug }}">
<img src="{{ projects.main_image.image|thumbnail_url:'projects_top_thumbnail' }}" alt="{{ projects.title }}" />
<div class="showcase-title">
{{ projects.title }}
</div>
</a>
</li>
{% endfor %}
</div>
<div class="col-md-4">
{% for projects in project %}
<li>
<a href="{{ current_page.get_absolute_url }}{{ project.slug }}">
<img src="{{ projects.main_image.image|thumbnail_url:'projects_top_thumbnail' }}" alt="{{ projects.title }}" />
<div class="showcase-title">
{{ projects.title }}
</div>
</a>
</li>
{% endfor %}
</div>
<div class="pagination">
<span class="step-links">
{% if project.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ project.number }} of {{ project.paginator.num_pages }}.
</span>
{% if project.has_next %}
next
{% endif %}
</span>
</div>
</div>
</div>
{% endif %}
Try this
<div class="container">
<div class="row">
{% for projects in project %}
<div class="col-md-4">
<li>
<a href="{{ current_page.get_absolute_url }}{{ project.slug }}">
<img src="{{ projects.main_image.image|thumbnail_url:'projects_top_thumbnail' }}" alt="{{ projects.title }}" />
<div class="showcase-title">
{{ projects.title }}
</div>
</a>
</li>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="step-links">
{% if project.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ project.number }} of {{ project.paginator.num_pages }}.
</span>
{% if project.has_next %}
next
{% endif %}
</span>
</div>
</div>
If you are looking for a grid of 3X3 Then the above code solves that.