Django实现前端切换按日期/名称排序功能的问题咨询

你的问题在于当前的下拉选框只是静态元素，没有和后端建立交互逻辑，所以选择排序方式后不会触发查询集的重新排序。下面提供两种可行的解决方案：

方案一：基于表单提交的同步排序（适合新手） #

这种方式把排序参数整合到现有的GET表单中，通过提交表单触发后端重新排序查询集。

模板修改 #

将排序下拉框加入到搜索表单内，并给选项设置对应的字段值，同时保留当前选中状态：

{% block content %}
<h1 class="tytul">Lokalizacja plików</h1>
<div class="naglowek">
<div class="card card-body">

<p>Wyszukaj plik</p>
<form method="get">
    {{myFilter.form}}
    <div class="sortowanie">Wybierz po czym sortować:
        <select class="sort" name="sort_by">
            <option value="nazwa" {% if request.GET.sort_by == 'nazwa' or not request.GET.sort_by %}selected{% endif %}>Nazwa</option>
            <option value="data" {% if request.GET.sort_by == 'data' %}selected{% endif %}>Data</option>
        </select>
    </div>
    <button class="button" type="submit">Wyszukaj i sortuj</button>
</form>

</div>
</div>

<div id="plik-list-container">
    {% for plik in obj %}
    <div class="row">
        <div class="com">{{plik.nazwa}}</div>
        <div class="com">{{plik.data}}</div>
        <div class="com">{{plik.lokalizacja}}</div>
        <div class="przy">
            <a href="{% url 'download' plik.lokalizacja %}" class="button">pobierz</a>
        </div>
    </div>
    {% endfor %}
</div>     
{% endblock %}

后端视图修改 #

在视图中获取排序参数，验证后对查询集进行排序：

from django.shortcuts import render
from .models import Plik
from .filters import PlikFilter

def plik_list(request):
    # 初始化查询集和过滤器
    queryset = Plik.objects.all()
    myFilter = PlikFilter(request.GET, queryset=queryset)
    filtered_obj = myFilter.qs

    # 处理排序逻辑
    sort_by = request.GET.get('sort_by', 'nazwa')  # 默认按名称排序
    # 验证参数，避免非法字段排序
    if sort_by in ['nazwa', 'data']:
        filtered_obj = filtered_obj.order_by(sort_by)

    context = {'obj': filtered_obj, 'myFilter': myFilter}
    return render(request, '你的模板文件名.html', context)

方案二：AJAX无刷新排序（优化用户体验） #

这种方式无需刷新页面，通过JavaScript发送异步请求获取排序后的列表并更新页面。

模板修改 #

给下拉框添加ID和事件监听，同时将列表放入单独容器方便替换：

{% block content %}
<h1 class="tytul">Lokalizacja plików</h1>
<div class="naglowek">
<div class="card card-body">

<p>Wyszukaj plik</p>
<form method="get">
    {{myFilter.form}}
    <button class="button" type="submit">Wyszukaj</button>
</form>

<div class="sortowanie">Wybierz po czym sortować:
    <select class="sort" id="sort-select">
        <option value="nazwa" {% if request.GET.sort_by == 'nazwa' or not request.GET.sort_by %}selected{% endif %}>Nazwa</option>
        <option value="data" {% if request.GET.sort_by == 'data' %}selected{% endif %}>Data</option>
    </select>
</div>
</div>
</div>

<div id="plik-list-container">
    {% for plik in obj %}
    <div class="row">
        <div class="com">{{plik.nazwa}}</div>
        <div class="com">{{plik.data}}</div>
        <div class="com">{{plik.lokalizacja}}</div>
        <div class="przy">
            <a href="{% url 'download' plik.lokalizacja %}" class="button">pobierz</a>
        </div>
    </div>
    {% endfor %}
</div>     

<script>
document.getElementById('sort-select').addEventListener('change', function() {
    const sortBy = this.value;
    // 保留当前搜索参数
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('sort_by', sortBy);

    fetch(window.location.pathname + '?' + urlParams.toString())
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newListContent = doc.getElementById('plik-list-container').innerHTML;
            document.getElementById('plik-list-container').innerHTML = newListContent;
            // 更新浏览器URL，保持历史记录
            window.history.replaceState({}, '', window.location.pathname + '?' + urlParams.toString());
        });
});
</script>
{% endblock %}

后端视图 #

视图逻辑和方案一完全一致，无需额外修改。

内容的提问来源于stack exchange，提问作者Robert Wyszynski