Как отсортировать представление списка, используя Ajax в Django?

Question

В шаблоне представления списка я создал форму фильтра, которая фильтрует сообщения, и снова это выпадающий список для их сортировки:

<form id="sortForm">
    <select class="input-text" id="sort" onchange="document.querySelector('#sortSubmitBtn').click()" name="sort"
        id="sort">
        <option disabled selected>Sort by</option>
        <option value="price_l2h" {% if 'price_l2h' == values.sort %} selected {% endif %}>
            Price (low to high)</option>
        <option value="price_h2l" {% if 'price_h2l' == values.sort %} selected {% endif %}>
            Price (high to low)</option>
    </select>
    {% if values.keywords %}
    <input type="hidden" name="keywords" id="keywords" value="{{ values.keywords }}">
    {% endif %}
    {% if values.mls_number %}
    <input type="hidden" name="mls_number" id="mls_number" value="{{ values.mls_number }}">
    {% endif %}

    <button type="submit" id="sortSubmitBtn" style="display: none;">Submit</button>
</form>

и вот Ajax, который я использовал для сортировки, но это не работает. Я использовал тот же синтаксис Ajax для сохранения данных в моделях, он работал нормально, но этот не работает.

<script>
    $(document).on('submit', '#sortForm', function (e) {
        e.preventDefault();

        $.ajax({
            type: 'GET',
            url: "{% url 'listing:search' %}",
            data: {
                sort: $('#sort').val(),
                keywords: $('#keywords').val(),
                mls_number: $('#mls_number').val(),
                csrfmiddlewaretoken: "{{ csrf_token }}",
            },
            success: function () {
                alert('Form submitted successfully!!');
            }
        })
    })

</script>

the urls.py:

path('search/', search, name='search'),

Спасибо, надеюсь, кто-нибудь мне поможет с этим.

edit: Вот как GUI выглядит на выберите Я хочу отсортировать списки:

изменить: views.py добавлен

def search(request):
    queryset = Listing.objects.all().order_by('listing_date')

    listing_for = request.GET.get('listing_for')

    # filter by price
    min_price = request.GET.get('min_price')
    max_price = request.GET.get('max_price')
    if min_price and max_price:
        queryset = queryset.filter(price__range=(min_price, max_price))

    # Filter by new mls number
    mls_number = request.GET.get('mls_number')
    if mls_number:
        queryset = queryset.filter(mls_number__exact=mls_number)

    # filter by keyword
    keywords = request.GET.get('keywords')
    if keywords:
        queryset = queryset.filter(Q(description__icontains=keywords) | Q(
            lot_feature__title__icontains=keywords) | Q(interior_feature__title__icontains=keywords) | Q(exterior_finish__title__icontains=keywords) | Q(extra_feature__title__icontains=keywords) | Q(appliances__title__icontains=keywords) | Q(view__title__icontains=keywords)).distinct()

    # sorting function
    sort_by = request.GET.get('sort')
    if sort_by:
        if sort_by == 'price_l2h':
            queryset = queryset.order_by('price')
        elif sort_by == 'price_h2l':
            queryset = queryset.order_by('-price')
        elif sort_by == 'newest':
            queryset = queryset.order_by('-listing_date')
        elif sort_by == 'bedrooms':
            queryset = queryset.order_by('-bedrooms')
        elif sort_by == 'bathrooms':
            queryset = queryset.order_by('-bathrooms')
        elif sort_by == 'sqrft':
            queryset = queryset.order_by('-sqrft')

    context = {
        'listings': queryset,
        'city': city,
        'provinces': provinces,
        'prices': prices,
        'property_types': property_type,
        'rooms': rooms,
        'values': request.GET,
        'int_values': int_values,
        'page': page,
    }

    return render(request, 'listing/listings.html', context)

Answer 1

Это не то, как работает ajax, вам нужно будет отправить JsonResponse и использовать его. Для такой операции вы можете использовать django-rest-framework, что упростит вашу работу. Если вы не хотите его использовать, вам необходимо изменить свой код, аналогично этой ссылке .

Answer 2

Для сортировки данных на стороне сервера вы можете использовать свой метод QuerySet order_by или упорядочивание модели -Meta-option.

Вы также можете отсортируйте возвращенные данные в JavaScript на стороне клиента.