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
Related
I try to do this:
{% for post in posts %}
{% if forloop.counter 15>=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 %}
{% endfor %}
and it gives me an error:
the photo here
**What I'm trying to do is make the repetition start at 15 and end or = at 30 **
I searched a lot and couldn't find what I wanted
So please help me
lan = python django
try it like this
{% if forloop.counter>15 and forloop.counter<=30 %}
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>
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 %}
I have created a blog with Django that I originally looped through each post with:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<h4>{{ post.title }}</h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}
<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>
{% endfor %}
</div>
Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<div class="row">
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% endfor %}
</div><!-- End container -->
However each unique post now displays twice in a card:
First row of posts
Second row of posts
Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.
Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
{% if forloop.counter0|divisibleby:2 %}
<div class="row">
{% endif %}
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% if forloop.counter|divisibleby:2 == False %}
</div>
{% endif %}
{% endfor %}
// When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}
</div>
{% endif %}
</div><!-- End container -->