Django пагинатор + Ajax JS Jquery + Сортировка

Не могу синхронизировать сортировку и пагинатор(django + ajax). То есть я вообще не могу понять, стоит ли генерировать новый пагинатор при ajax запросе или же можно как-то обойти это и при одном пагинаторе выводить разный контент в зависимости от сортировки. Я пришёл к выводу что нужно при нажатии определенной сортировки, у нас запускается ajax запрос, который удаляет класс в номере пагинатора и ставит свой определенный класс, допустим sort2 и потом номера пагинатора будут открывать уже отсортированный товар, но реализовать я это не могу как бы долго не пытался. Возможно это вообще невозможно? Я пробовал и генерировать новый пагинатор при новом ajax запросе с уже созданным классом, но это тоже не помогло.

Вот JSON файл сортированных по возрастанию и убыванию товаров

if request.method == 'POST':
        page_n = request.POST.get('page_n', None) 
        in_ascending_order = list(paginatorr.page(page_n).object_list.values('id', 'title', 'price', 'img'))
        in_descending_order = list(paginatorr2.page(page_n).object_list.values('id', 'title', 'price', 'img'))
        return JsonResponse({"in_ascending_order": in_ascending_order, "in_descending_order": in_descending_order})

Вот генерирование номеров пагинатора с классом sort1, то есть будут выбраны только товары относящиеся к сортированному по возрастанию списку

{% for i in page_range %}

                            <li class="page-item active" aria-current="page"></li>
                            <a href="{{i}}" class="page-link sort1" id="by_sort">{{i}}</a>
                            </li>

                            {% endfor %}

<script>


    $(document).ready(function () { 

        setTimeout(function () { 

            $('#click-block-vozr').click();
        }); 
    });



    var elem = document.getElementsByClassName('sort1')
    $(elem).click(function (event) {
        event.preventDefault();
        
       
        


        var page_n = $(this).attr('href');
        // ajax
        $.ajax({
            type: "POST",
            url: "{% url 'by_subcategory' current_category.pk current_subcategory.pk %}", // name of url
            data: {
                page_n: page_n, //page_number
                csrfmiddlewaretoken: '{{ csrf_token }}',
            },
            success: function (resp) {
                //loop
                $('#posts').html('')
                $.each(resp.in_ascending_order, function (i, val) {

                    //apending posts
                    $('#posts').append('<div class="col-12 col-sm-6 col-md-6 col-lg-4 p-1">' +
                        '<div class="card h-100">' + '<img class="card-img-top" alt="..." src="{% static "" %}' + val.img + '">' +
                        '<div class="card-body text-end">' +
                        '<h5 class="card-text someprice">' +
                        val.price +
                        ' Т/шт' +
                        '</h5>' +
                        '</div>' +

                        '<div class="card-body border-top h-100 productname">' +
                        '<p class="card-text text-white bg-none sometitle">' + val.title + '</p>'
                        + '</div>'
                        + '</div>'
                        + '</div>')
              
                })
                
              
                

            },

            error: function () { }
        }); 

    });


    var elem2 = document.getElementsByClassName('sort2')
    $(elem2).click(function (event) {
        event.preventDefault();
       
        var page_n = $(this).attr('href');
        // ajax
        $.ajax({
            type: "POST",
            url: "{% url 'by_subcategory' current_category.pk current_subcategory.pk %}", // name of url
            data: {
                page_n: page_n, //page_number
                csrfmiddlewaretoken: '{{ csrf_token }}',
            },
            success: function (resp) {
                //loop
                $('#posts').html('')
                $.each(resp.in_descending_order, function (i, val) {

                    //apending posts
                    $('#posts').append('<div class="col-12 col-sm-6 col-md-6 col-lg-4 p-1">' +
                        '<div class="card h-100">' + '<img class="card-img-top" alt="..." src="{% static "" %}' + val.img + '">' +
                        '<div class="card-body text-end">' +
                        '<h5 class="card-text someprice">' +
                        val.price +
                        ' Т/шт' +
                        '</h5>' +
                        '</div>' +

                        '<div class="card-body border-top h-100 productname">' +
                        '<p class="card-text text-white bg-none sometitle">' + val.title + '</p>'
                        + '</div>'
                        + '</div>'
                        + '</div>')
                    



                });
               

            },
            error: function () { }
        }); // 

    });
</script>