Pagination with Jsonresponse

Using Django
1

Pagination is not working with Jsonresponse.
‘Previous’,‘Next’,‘Last’ option is not visible on html.

Please, help.

View.py.

def posts(request):
    posts = Post.objects.all()

    # Return posts in reverse chronologial order
    posts = posts.order_by("-dt").all()
    paginator = Paginator(posts, 10)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    return JsonResponse([post.serialize() for post in page_obj],safe=False)

HTML template

<div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; first</a>
                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
            {% endif %}
    
            <span class="current">
                Page {{ page.number }} of {{ page.paginator.num_pages }}.
            </span>
    
            {% if posts.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">next</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
            {% endif %}
        </span>
    </div>
2

A JsonResponse doesn’t render a template. It returns a JSON response, not HTML.

Are you making a request through AJAX? (How are you making the request?) If you’re using AJAX, you’ll have to handle the pagination - I’m not sure what information the JSON response will return. (You can examine the data being returned in your browser’s developer tools and figure out what you need to do from that.)

3

I am using ‘fetch’ API call to get the data from Jsonresponse.
Fetch request generate HTML dynamically and does show the first 10 entries as set in the views.py function. My page also shows first 10 entries. However, there is no option to see next page or entries.

4

You’ll need to include the pagination data in your json response and handle it from within your JavaScript code in the browser.

6

Thanks you very much for the reply. I could not solve it using Jsonresponse and javascript. However, i changed code to use render method. And it works,