CENMAC

In this Django pagination article, I will walk you through step by step how to create an app with different ways of pagination ie. Multiple Item pagination and Single Item Pagination.

Django has a built-in pagination class that allows you to manage paginated data. Under the hood, all methods of pagination use the Paginator class. It does all the heavy lifting of actually splitting a QuerySet into Page objects.

We are going to begin by creating a new Django project using this command

django-admin startproject myproject

After creating the project change directory to the project folder directory and after that you need to create an App by executing the following command. I am going to call this app MyApp

python manage.py startapp myapp

After the app has been created, you will have to add it in the settings.py file where you have INSTALLED_APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
]

OK now after this you need to do migrate your Django project

Python manage.py migrate

Let's create a templates folder because we need to add some HTML files to our templates folder, make sure that after creating templates folder you need to open your settings.py and add the templates directory into DIRS section like this.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates']
    },
]

1. Multiple Items pagination

In this type of pagination, a page can contain one or more items not base on the items primary key or id

we are going to begin our pagination process by creating our models as seen below

from django.db import models
from django.utils import timezone

class Items(models.Model):
    title = models.CharField(max_length = 200)
    author = models.CharField(max_length = 200)
    content = models.TextField()
    date_pub = models.DateTimeField(default = timezone.now())

    def __str__(self):
        return self.title

we have a model that has four fields.

After this, you have to make migrations and migrate

#1 
python manage.py makemigrations  
#2
python manage.py migrate

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger


def item_list(request):
	all_items = Items.objects.all() # Query all Items in the database
        
       # pass the query items(objects) to pagination class and define the number of items to show at a time

	paginator = Paginator(all_items, 3) 
	page = request.GET.get('page')

	try:
		items = paginator.page(page)
	except PageNotAnInteger:
		# If page is not an integer, deliver first page.
		items = paginator.page(1)
	except EmptyPage:
		# If page is out of range (e.g. 9999), deliver last page of results.
		items = paginator.page(paginator.num_pages)

	return render(request, 'item_list.html', {'all_items':all_items, 'items':items, })

Now you need to create a new urls.py in your app that you have created. and link your view function as seen below

from django.contrib import admin
from django.urls import include, path, re_path

from myapp.views import item_list


urlpatterns = [
    path('admin/', admin.site.urls),

    path('', item_list, name='item_list'),
]

OK now in your templates folder you need to create an html file that will display the information as below.

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <ul class="pagination justify-content-center">

            {% if items.has_previous %}
            <li class="page-item">
              <a class="page-link" href="?page=1" tabindex="-1">First Page</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="?page={{ items.previous_page_number }}" tabindex="-1"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
            </li>
            {% endif %}

            <li class="page-item">
                <a class="page-link" href="#">{{ items.number }} {% trans 'of' %} {{ items.paginator.num_pages }}</a>
            </li>

            {% if items.has_next %}
            <li class="page-item">
              <a class="page-link " href="?page={{ items.next_page_number }}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li class="page-item">
              <a class="page-link" href="?page={{ items.paginator.num_pages }}">Last Page</a>
            </li>
            {% endif %}
        </ul>
    </div>
</div>

Now you can run your project and you will see the pagination.

2. Single Item pagination.

In this type of Django pagination, one page carries only an item with its details and the next page carries the next Item with its own details. In this case, I call it pagination by ID or Primary Key which there means that the next page button caries the URL of the next item if there a next item meanwhile the previous page button carries the previous page URL if there is a previous item

You are going to create another function that will display the details of an item your views.py file as below.

def item_details(request, item_id):
	get_item = Items.objects.get(id=item_id)

	#pagination buttons
	next_page = Items.objects.filter(id__gt=get_item.id).order_by('id').first()
	previous_page = Items.objects.filter(id__lt=get_item.id).order_by('-id').first()


	return render(request, 'item_details.html', {'previous_page':previous_page, 'next_page':next_page})

Let's pass the function to our urls.py file.

from django.contrib import admin
from django.urls import include, path, re_path

from myapp.views import item_list


urlpatterns = [
    path('admin/', admin.site.urls),

    path('', item_list, name='item_list'),
    
    path('item_details/<item_id>/', item_details, name="item_details"),
]

You are going to create a template file called item_details.html where the details about an item will be displayed, add the below snippet on it as below.

<p>
	{% if next_page %}
	<a  class="btn btn-primary btn-lg btn-alt"  style="float: right" href="{% url 'item_details' next_page.id %}">Next Item</a>
	{% else %}
	<a class="btn btn-primary btn-lg btn-alt" href="{% url 'item_details' previous_page.id %}">Previous Item</a>
	{% endif %}
</p>

Fire up your server and it should just work perfectly.

If you need the source code please comment below and do not hesitate to ask if you face any difficulty.

If you need immediate help you can get to on twitter at @cmuloh

Did this help you?

Web Development

Operating Systems

Electric

Programming/Databases

Empowerment

Logical Reasoning

Education

Different Ways Of Pagination In Django

1. Multiple Items pagination

2. Single Item pagination.

related posts

Sublime Text 3 Build 3207 And 3208 Licence Key

How To Import Countries, Region/State, And City Data In Your Database, With Django-City-Light

Terminologies Every Programmer Needs To Know

A Step-By-Step Guide To Properly Starting A Django Project

81 comments

GAmaconzIJ

Comment reply

HwOTVzbd

Comment reply

FAKLtxiuvajpD

Comment reply

PIUZTgnQwfovXzV

Comment reply

pByjXePKIZk

Comment reply

vAekLGBPx

Comment reply

qQzHLhCaVv

Comment reply

tBNXSvPDjFlTsa

Comment reply

JdzOZwkNpYxgvm

Comment reply

UnqNyQKZ

Comment reply

zqSIkCaYHL

Comment reply

DYcsifaxw

Comment reply

TrnkXPBJywAFc

Comment reply

eRdSYTznNg

Comment reply

JpXKfYVBHsaME

Comment reply

MwevDxukZEYWTip

Comment reply

ZursdJvSlNYQMfnT

Comment reply

TyuXUinEIlhY

Comment reply

BnIaWvrgb

Comment reply

NQMmvwSaRheCAq

Comment reply

EUqwlszYmMvoV

Comment reply

UKFbcOILPs

Comment reply

CDipfqzNWca

Comment reply

NQZzgBEfCGRUcI

Comment reply

pFEUSHPfwYuvq

Comment reply

zCZPJKTAUfcotI

Comment reply

MmTJKFwUij

Comment reply

ixGqrjFawseL

Comment reply

MDctkApjR

Comment reply

tMoWfszjeBcG

Comment reply

ePgTAwyMXWmUOtVd

Comment reply

duQwXNChbtIkEyrM

Comment reply