Django Ajax Pagination Example Tutorial

Published On: 10/10/2022 | Category: Django

Hi Dev,

Today our leading topic is django ajax pagination example tutorial. This tutorial will give you simple example of how to use django pagination with ajax and jquery. this example will help you how to create pagination using jquery and ajax in django. I explained simply step by step django ajax pagination example. So, let's follow few step to create example of django pagination with ajax and jquery.

Each link's AJAX request and the client-side code that initiates the requests are processed by AJAX pagination. JQuery is being used in this post to do AJAX requests.

Here i explained simply step by step example of how to how to create pagination using ajax in django.

Step 1: Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example

Step 2: Create a App

Now we'll create a single app called core to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python3 startapp core

Step 3: Update

Then update INSTALLED_APPS within our file to notify Django about the app, in file so our setting file look like this..


Step 4: Create a Model

Now go for the models we will We'll call our single model Post and it will have just one fields: title. And finally set __str__ to display the name of the article in admin interface.

from django.db import models

# Create your models here.
class Article(models.Model):
    title = models.CharField(max_length=300)
    def __str__(self):
        return self.title

Ok, all set. We can engender a migrations file for this change, then integrate it to our database via migrate.

python makemigrations
python migrate

Step 5: Creating the Views

In this step, we need to configure views. The home page will just be a template. function is basically get the all object of article table open the core/ file and add:

from django.shortcuts import render
from .models import Article
from django.http import JsonResponse
from django.core.paginator import Paginator

# Create your views here.
def pagination_ajax(request):
    my_model = Article.objects.all()
    number_of_item = 5
    paginatorr = Paginator(my_model, number_of_item)
    first_page =
    page_range = paginatorr.page_range

    context = {

    if request.method == 'POST':
        page_n = request.POST.get('page_n', None)
        results = list('id', 'title'))
        return JsonResponse({"results":results})

    return render(request, 'index.html',context)

Step 6: Creating the Templates

Next, then with your text editor create new templates files: core/templates/index.html file and the add:

<!DOCTYPE html>
        <link rel="stylesheet" href="" />
        <script src=""></script>
        <script src=""></script>
                background-color: #f7fcff;
            .pagination { display: inline-block;}
            .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none;}
            .pagination { background-color: #4CAF50; color: white;}
            .pagination a:hover:not(.active) {background-color: #ddd;}
    <div class="container mt-5 pt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4>Django Ajax Pagination Example Tutorial - <span class="text-primary"></span></h4>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <tbody id="articles">
                                {% for i in first_page %}
                                {% endfor %}    
                        <div class="pagination">
                            {% for i in page_range %}
                                <a style="margin-left: 5px;" class="ajax-pag" href="{{i}}">{{i}}</a>
                            {% endfor %}

        var page_n = $(this).attr('href');

            type: "POST",
            url: "{% url 'pagination_ajax' %}", 
            data : {    
                page_n : page_n, 
                csrfmiddlewaretoken: '{{ csrf_token }}',
            success: function (response) {
                $.each(response.results, function(i, val) {
                $('#articles').append('<tr><td>' + val.title + '</td></tr>')
            error: function () {
                alert('Error Occured');

Step 7: Creating URLs

In this section, we need a file within the core app however Django doesn't create one for us with the startapp command. Create core/ with your text editor and paste below code.

from django.urls import path
from . import views

urlpatterns = [
    path('pagination', views.pagination_ajax,name='pagination_ajax'),

Next, we require to add a URL path for our example app which can be done by importing include and setting a path for it.

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

urlpatterns = [
    path('', include('core.urls')),

Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/pagination address with a web browser.

I hope it will help you....

Happy Coding!