Django Rest framework with ajax pagination, how to switch data in the template? - ajax

Question

How can I fill in the table data when switching to the next page using ajax pagination.
views.py
class PositionPageNumberPagination(PageNumberPagination):
page_size = 1
max_page_size = 5
def get_paginated_response(self, data):
context = {
'next': self.get_next_link(),
'previous': self.get_previous_link(),
'count': self.page.paginator.count,
'results': data,
}
return Response(context)
class PositionListAPIView(ListAPIView):
queryset = Position.objects.all().order_by('name')
serializer_class = PositionSerializer
pagination_class = PositionPageNumberPagination
def list(self, request, *args, **kwargs):
page = self.paginate_queryset(self.queryset)
if page is not None:
serializer = self.get_serializer(page, many=True)
return self.get_paginated_response(serializer.data)
serializer = self.get_serializer(self.queryset, many=True)
return Response({'data': serializer.data})
position_list.html
{% extends 'index.html' %}
{% load static %}
{% block title %}The list of positions{% endblock %}
{% block content %}
`
<div class="pagination">
<span>
<a id="previous">previous</a>
<a id="next">next</a>
</span>
<span id="count"></span>
</div>
<div>
<button id="add_position">Add</button>
<button id="edit_position">Edit</button>
<button id="delete_position">Delete</button>
</div>
{% endblock %}
{% block addscript %}
<script src="{% static 'js/positions.js' %}"></script>
{% endblock %}
urls.py
path('positions/', TemplateView.as_view(template_name='positions/position_list.html')),
position.js
When I click on 'next element', the data does not change, but the API is started (api / positions/?page=2)
$.ajax({
url : "/api/positions/",
dataType: "json",
success : function (data) {
let results = data.results;
let positions = $('.positions');
for (let i in results){
positions.append(`<tr id=${results[i].id}><td>${results[i].name}</td></tr>`)
}
$('#count').html(data.count);
$('#previous').attr('href', data.previous);
$('#next').attr('href', data.next);
}
});