Django QuerySet实现下拉筛选展示查询列表的方案咨询

1. 调整views.py逻辑 #

修改后的视图代码如下，核心是获取筛选参数、过滤查询集，同时将筛选选项和当前选中值传递到模板：

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage

def kibana(request):
    # 获取筛选参数
    datacenter_filter = request.GET.get('datacenter', '')
    dashboardtipi_filter = request.GET.get('dashboardtipi', '')
    
    # 基础查询集+动态过滤
    kibana_list = kibanalar.objects.all()
    if datacenter_filter:
        kibana_list = kibana_list.filter(datacenter=datacenter_filter)
    if dashboardtipi_filter:
        kibana_list = kibana_list.filter(dashboardtipi=dashboardtipi_filter)
    
    # 分页逻辑保持不变
    paginator = Paginator(kibana_list, 1000000000000000)
    page = request.GET.get('page')
    try:
        kmembers = paginator.page(page)
    except PageNotAnInteger:
        kmembers = paginator.page(1)
    except EmptyPage:
        kmembers = paginator.page(paginator.num_pages)
    
    # 获取下拉框可选值（去重、排除空值）
    datacenter_options = kibanalar.objects.values_list('datacenter', flat=True).distinct().exclude(datacenter__isnull=True)
    dashboardtipi_options = kibanalar.objects.values_list('dashboardtipi', flat=True).distinct().exclude(dashboardtipi__isnull=True)
    
    return render(request, 'kibanalar.html', {
        'kmembers': kmembers,
        'datacenter_options': datacenter_options,
        'dashboardtipi_options': dashboardtipi_options,
        'current_datacenter': datacenter_filter,
        'current_dashboardtipi': dashboardtipi_filter,
    })

2. 修改kibanalar.html模板 #

2.1 新增筛选表单 #

你可以选择下拉切换自动触发筛选，或者加按钮手动触发，以下是自动触发的实现代码：

<!-- 筛选表单 -->
<form method="get" action="" id="filter-form">
  <div style="margin: 10px 0;">
    <label>数据中心：</label>
    <select name="datacenter" onchange="document.getElementById('filter-form').submit()">
      <option value="">全部</option>
      {% for dc in datacenter_options %}
      <option value="{{ dc }}" {% if dc == current_datacenter %}selected{% endif %}>{{ dc }}</option>
      {% endfor %}
    </select>

    <label style="margin-left: 20px;">仪表盘类型：</label>
    <select name="dashboardtipi" onchange="document.getElementById('filter-form').submit()">
      <option value="">全部</option>
      {% for tp in dashboardtipi_options %}
      <option value="{{ tp }}" {% if tp == current_dashboardtipi %}selected{% endif %}>{{ tp }}</option>
      {% endfor %}
    </select>
  </div>
</form>

<!-- 原有列表渲染逻辑保持不变 -->
<table>
  <tr>
    <th>数据中心</th>
    <th>仪表盘类型</th>
    <th>名称</th>
    <!-- 其他字段表头 -->
  </tr>
  {% for item in kmembers %}
  <tr>
    <td>{{ item.datacenter }}</td>
    <td>{{ item.dashboardtipi }}</td>
    <td>{{ item.isim }}</td>
    <!-- 其他字段渲染 -->
  </tr>
  {% endfor %}
</table>

2.2 调整分页链接（必填） #

需要把筛选参数拼到分页的GET请求中，避免翻页后筛选条件丢失：

<!-- 上一页示例 -->
{% if kmembers.has_previous %}
<a href="?page={{ kmembers.previous_page_number }}&datacenter={{ current_datacenter }}&dashboardtipi={{ current_dashboardtipi }}">上一页</a>
{% endif %}

<!-- 下一页示例 -->
{% if kmembers.has_next %}
<a href="?page={{ kmembers.next_page_number }}&datacenter={{ current_datacenter }}&dashboardtipi={{ current_dashboardtipi }}">下一页</a>
{% endif %}

可选：无刷新动态筛选 #

如果需要页面不跳转实现筛选，只需要给表单加AJAX提交逻辑，把返回的列表部分替换页面原有内容即可，不需要修改后端逻辑。

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