DEV Community

loading...
Cover image for Pagination class in Django

Pagination class in Django

madhubankhatri profile image Madhuban Khatri ・2 min read

What is Pagination?

Pagination is the process of splitting the contents of a website, or a section of contents from a website, into discrete pages. It is prevalent in web design, appearing in most web applications to allow direct access to divided contents across a number of different pages.

Why we use Pagination?

When we need to display some posts in a page and other posts in next pages so here we use Pagination to make websites beautiful.

Django Pagination Class

Django provides Pagination Class for create Pagination process to our websites. Here we discuss about how to use Django Pagination Class

  • First of all we need to create a Django Project.
django-admin startproject dj_pagination
Enter fullscreen mode Exit fullscreen mode
  • Create an App in dj_pagination project
python manage.py startapp app1
Enter fullscreen mode Exit fullscreen mode
  • Go to settings.py and add App in it.
INSTALLED_APPS = [
     ...
     'app1'
]
Enter fullscreen mode Exit fullscreen mode
  • models.py
from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=300)
    desc = models.TextField()

    def __str__(self):
        return self.title
Enter fullscreen mode Exit fullscreen mode
  • admin.py
from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)
Enter fullscreen mode Exit fullscreen mode
  • app1/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),

]
Enter fullscreen mode Exit fullscreen mode
  • app1/views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Post
from django.core.paginator import Paginator


# Create your views here.

def index(request):
    all_posts = Post.objects.all().order_by('-id')
    p = Paginator(all_posts, 2) # where 2 is number of Posts per Page

    page_num = request.GET.get('page') # get page number from index.html

    page_obj = p.get_page(page_num) # creat a Page Object (Important)

    page_range = p.page_range # this page range

    param = {'page_obj': page_obj, 'page_range': page_range}
    return render(request, 'index.html', param)

Enter fullscreen mode Exit fullscreen mode
  • templates/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Pagination Class in Django</title>
    <style type="text/css">
        *
        {
            font-family: sans-serif;
        }
        .header
        {
            color: steelblue;
            margin-left: 20px;
        }
        .container
        {
            margin-left: 100px;
            margin-top: 20px;
        }

        .pre, .nxt
        {
            background: dodgerblue;
            color: white;
            text-decoration: none;
            padding: 10px;
            box-shadow: 5px 5px 10px 0px black;
            margin-right: 10px;
            margin-left: 10px;
        }

        .page_num a
        {
            border: 1px solid;
            padding: 5px;
            background: lightgrey;
            text-decoration: none;
        }
        .active a
        {
            background: blue;
            border: 1px solid;
            padding: 5px;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1 class="header">Pagination Class in Django</h1>
    <hr>
    {% for post in page_obj.object_list %}
        <div class="container">
            <h3>{{post.id}}.) {{post.title}}</h3>
            <p>{{post.desc}}</p>
        </div>
    {% endfor %}
    <hr>
    <div style="margin-left: 100px; margin-top: 20px;">
        {% if page_obj.has_previous %}
            <a class="pre" href="?page={{page_obj.previous_page_number}}">Previous</a>
        {% endif %}
        {% for i in page_range %}
            {% if i == page_obj.number %}
                <span class="active">
                    <a href="?page={{i}}">{{i}}</a>
                </span>
            {% else%}
                <span class="page_num">
                    <a href="?page={{i}}">{{i}}</a>
                </span>
            {% endif %}
        {% endfor %}

        <!--<span>{{page_obj.number}} of {{page_obj.paginator.num_pages}}</span>-->


        {% if page_obj.has_next %}
            <a class="nxt" href="?page={{page_obj.next_page_number}}">Next</a>
        {% endif %}
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide