Django Rest Framework Pagination integration with Vuetable-2

pagination.py

# =======================================================================
# === Description ...: Integrate DRF with VueTable-2
# === Author ........: Mike Boiko
# =======================================================================

# If you want to integrate Django Rest Pagination with VueTable, you must
# change the pagination as shown below:
# Then, in your views.py file, the pagination_class must be set to CustomPagination
# See example below:
# from rest_framework import pagination
# class AuditAPIView(generics.ListAPIView):
    # serializer_class        = AuditSerializer
    # queryset                = Audit.objects.all()
    # pagination_class = CustomPagination
    
from rest_framework import pagination, response

class CustomPagination(pagination.PageNumberPagination):
    page_size = 10
    page_size_query_param = 'per_page'
    # max_page_size = 100

    # Paginate in the style defined by vuetable2
    def get_paginated_response(self, data):

        # Get id's of records in current page
        firstRecord = data[0]['id'] if (data and 'id' in data[0]) else None
        lastRecord = data[-1]['id'] if (data and 'id' in data[0]) else None

        return response.Response({
            'pagination': {
                'total': self.page.paginator.count,
                'per_page': self.get_page_size(self.request),
                'current_page': self.request.query_params.get('page', None),
                'last_page': self.page.paginator.num_pages,
                'next_page_url': self.get_next_link(),
                'previous_page_url': self.get_previous_link(),
                'first': firstRecord,
                'last': lastRecord,
            },
            'data': data
        })

I was just searching for something like this, great!

According to https://www.vuetable.com/guide/json-data-format.html you'll have to wrap the pagination node inside a link node like so:

 return response.Response({
            'links' : {
              'pagination': {
                'total': self.page.paginator.count,
                'per_page': self.get_page_size(self.request),
                'current_page': self.request.query_params.get('page', None),
                'last_page': self.page.paginator.num_pages,
                'next_page_url': self.get_next_link(),
                'previous_page_url': self.get_previous_link(),
                'from': firstRecord,
                'to': lastRecord,
              }
            },
            'data': data
        })

also, if you do not have inegers as indexes ( i use uuid ) you can calculate the first and last record like this:

firstRecord = (int(self.request.query_params.get('page', 0)) - 1) * int(self.get_page_size(self.request)) + 1
lastRecord = int(self.request.query_params.get('page', 0)) * int(self.get_page_size(self.request))
lastRecord = lastRecord if lastRecord <= self.page.paginator.count else self.page.paginator.count 

@raffaeletani, glad this was helpful!
I haven't used this code for a couple of years now, but I'll keep your comments in mind next time I'm working on a DRF/Vue project.