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?

WMIC

Web Development

Operating Systems

Electric

Programming/Databases

Empowerment

Logical Reasoning

Education

Different Ways Of Pagination In Django

1. Multiple Items pagination

6 comments

GAmaconzIJ

Comment reply

HwOTVzbd

Comment reply

xIBGaTJSucHWRzNM

Comment reply

QhWZuybcxP

Comment reply

PyJYjBtiq

Comment reply

GfdPZXJVNbKIUcxA

Comment reply

leave a reply

popular post

Fsck Error On Boot: /Dev/Sda6: Unexpected Inconsistency; Run Fsck Manually

email newsletter

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

6 comments

GAmaconzIJ

Comment reply

HwOTVzbd

Comment reply

xIBGaTJSucHWRzNM

Comment reply

QhWZuybcxP

Comment reply

PyJYjBtiq

Comment reply

GfdPZXJVNbKIUcxA

Comment reply

leave a reply

popular post

Fsck Error On Boot: /Dev/Sda6: Unexpected Inconsistency; Run Fsck Manually

email newsletter