In this article, we explain how to implement custom pagination using the Django Paginator package. We can directly add pagination in Django without modifying the views. So let's see the implementation of the pagination.
Let's take the example of the product_management, like your project name if products, So open the views.py of your app -
Open this path - products / view.py
If you have to implement pagination in your product grid, add give code in your views.py.
from django.core.paginator import Paginator
from .models import Products
from django.shortcuts import render
def grid(request):
products = Products.objects.all()
paginator = Paginator(products,10)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
return render(request,'products.html',{"products":page_obj})
After completing the code of your view file. Create an HTML file with the name products.html in your templates directory -
templates / products.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Products</title>
</head>
<body>
<div class="container">
<table class="table table-hover bg-white">
<thead class="bg-light">
<tr>
<th style="width:25%"><input type="checkbox" id="select_all"> Select All</th>
<th>Id</th>
<th>Handle</th>
<th>Title</th>
<th>Body</th>
<th>Vendor</th>
<th>Type</th>
<th>Tags</th>
<th>Published</th>
<th>Variant_Sku</th>
<th>Variant_Inventory_Tracker</th>
<th>Variant_Price</th>
<th>Image_Src</th>
</tr>
</thead>
<tbody>
{% if not products %}
<tr>
<td colspan="11">No product available</td>
</tr>
{% else %}
{% for product in products %}
<tr>
<td><input type="checkbox" id="product_{{ product.id }}"></td>
<td>{{ product.id }}</td>
<td>{{ product.handle}}</td>
<td>{{ product.title}}</td>
<td>{{ product.body}}</td>
<td>{{ product.vendor}}</td>
<td>{{ product.type}}</td>
<td>{{ product.tags}}</td>
<td>{{ product.published}}</td>
<td>{{ product.variant_sku}}</td>
<td>{{ product.variant_inventory_tracker}}</td>
<td>{{ product.variant_price}}</td>
<td><img src="{% if product.image_src is None %} Image Not available {% else %} {{ product.image_src }} {% endif %}" class="img-thumbnail"></td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<div class="row" style="float: right;" >
<nav aria-label="...">
<ul class="pagination">
{% if products.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ products.previous_page_number }}" tabindex="-1" aria-disabled="true">Previous</a>
</li>
{% endif %}
{% for page_number in products.paginator.page_range %}
<li class="page-item {% if products.number == page_number %} active {% endif %}"><a class="page-link " href="?page={{ page_number }}">{{ page_number }}</a></li>
{% endfor %}
{% if products.has_next %}
<a class="page-link" href="?page={{ products.next_page_number }}">Next</a>
<a class="page-link" href="?page={{ products.paginator.num_pages }}">Last »</a>
{% endif %}
</ul>
</nav>
</div>
</div>
</body>
</html>
Comments
Post a Comment