How to implement pagination in a Django and React app without using the REST framework?

Question

I am working on a website whose back-end is in Django and front-end is developed using React. I want to add the pagination feature in the website but don't know how it will be implemented in the frontend part.

I want to send the total page count to the react app.

I have written the following code in my views function till now

def index(request):
    influencers = Influencer.objects.all()

    paginator = Paginator(influencers,16)
    page = request.GET.get('page')
    paged_listings = paginator.get_page(page)
    user_list = UserList.objects.all().filter(user_id = request.user.id)

    queryset = list(chain(paged_listings,user_list),paginator.count)
    ser_query = serializers.serialize('json', queryset)
    return HttpResponse(ser_query)

Also I am not using REST framework to develop the back-end site.

I want to know what information I have to send to the React front-end site for this to work. How should I proceed?

Answer 1

I'd recommend you do use django-rest-framework because it's probably easier with pagination.

However, if you want to avoid that you could pass your own structure (obviously, you may need to pass other information such as next page/previous page etc).

The challenge here is ensuring everything is JSON serializable - that means for Queryset you have to use .values() and wrap the result with list(). For Paginator you need to wrap with list().

from django.http.response import JsonResponse

def index(request):
    influencers = Influencer.objects.all().values()

    paginator = Paginator(influencers,16)
    page = request.GET.get('page')
    paged_listings = paginator.get_page(page)
    user_list = UserList.objects.all().filter(user_id = request.user.id).values()

    queryset = list(chain(paged_listings,user_list),paginator.count)
    content = {'total_page_count': paginator.num_pages, 'data': queryset}
    return JsonResponse(content)