如何使用Django实现HTML表格列点击箭头排序功能

核心逻辑说明 #

整个实现基于Django原生能力，通过GET参数传递排序规则，后端校验后完成数据排序返回，无需依赖额外第三方插件。

1. 后端视图实现 #

首先在处理表格页面的视图中添加排序逻辑，必须加字段白名单避免SQL注入风险：

from django.shortcuts import render
from .models import YourTableModel # 替换为你自己的模型类

def your_table_page(request):
    # 配置允许参与排序的字段白名单，和模型字段一一对应
    allowed_sort_fields = ['id', 'title', 'create_time', 'amount', 'status']
    # 获取前端传递的排序参数，默认按id升序
    sort_param = request.GET.get('sort', 'id')
    
    # 校验排序参数合法性，非法参数则 fallback 到默认排序
    if sort_param.lstrip('-') not in allowed_sort_fields:
        sort_param = 'id'
    
    # 按排序参数查询数据
    table_data = YourTableModel.objects.all().order_by(sort_param)
    
    # 将当前排序状态传递给模板，用于控制箭头高亮状态
    context = {
        "table_data": table_data,
        "current_sort": sort_param
    }
    return render(request, "your_table_template.html", context)

2. 前端表头结构改造 #

按照你现有的表头结构调整，点击箭头自动切换升降序，同时匹配箭头高亮状态：

<th>
    <div class="d-flex align-items-center">
        <!-- 替换为你当前列的展示名称 -->
        <p class="fw-normal size-12 text-label mb-0 d-inline-block">列名</p>
        <!-- 排序点击链接，自动切换升降序参数，这里的name替换为当前列对应的模型字段名 -->
        <a href="?sort={% if current_sort == 'name' %}-name{% else %}name{% endif %}" class="text-decoration-none">
            <!-- 升序箭头，当前是升序则高亮为深灰色，否则浅灰 -->
            <i class="fas fa-arrow-up ms-2 {% if current_sort != 'name' %}text-gray{% else %}text-gray-dark{% endif %} size-12"></i>
            <!-- 降序箭头，当前是降序则高亮为深灰色，否则浅灰 -->
            <i class="fas fa-arrow-down ms-2 {% if current_sort != '-name' %}text-gray{% else %}text-gray-dark{% endif %} size-12"></i>
        </a>
    </div>
</th>

• 每个表头列对应替换上述代码中的name为对应模型字段即可
• 未选中的排序方向箭头显示为浅灰色，符合你原有样式设计

3. 功能优化：保留其他查询参数 #

如果你的表格支持搜索、分页等功能，需要在排序时保留已有的GET参数，可通过自定义Django模板过滤器实现：

1. 首先在APP下新建templatetags/query_tools.py文件：

from django import template

register = template.Library()

@register.simple_tag
def build_sort_url(request, new_sort):
    query_dict = request.GET.copy()
    query_dict['sort'] = new_sort
    return query_dict.urlencode()

2. 模板顶部加载自定义过滤器：

{% load query_tools %}

3. 替换表头排序链接的href属性：

<a href="?{% build_sort_url request '-name' %}" class="text-decoration-none">

4. 可选无刷新实现 #

如果需要点击排序不刷新整个页面，只需添加少量JS逻辑：

• 给所有排序链接绑定点击事件，阻止默认跳转行为
• 用fetch发起异步请求，后端判断如果是AJAX请求则只返回表格HTML片段，替换当前页面的表格容器即可

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