如何让django-tables2表头单元格整体作为排序链接？

问题 #

使用django-tables2生成表格，通过{% render_table table %}渲染后，表头仅文字区域是可点击的排序链接，箭头区域无法触发点击。想要实现整个表头单元格均可点击的交互效果。

已尝试的操作 #

• 已通过Bootstrap、django-tables2的Meta attrs和render_col()实现了<td>单元格的整格可点击链接效果
• 针对<th>表头单元格的尝试遇到障碍：
  • th的容器样式能正常设置，但django-tables2生成的<a>子元素无法带上Bootstrap的stretched-link类（代码里的"a": {"class": "stretched-link"}被解析成了th的属性，而非<a>的class）
  • 未找到表头对应的render方法

当前代码：

attrs = {
    "class": "table table-striped table-sm ",
    "th": {
        "class": "col-md-2 position-relative",
        "a": {"class": "stretched-link"},
    },
    "td": {"class": "col-md-2 position-relative"},
}

生成的HTML：

<th class="asc col-md-2 orderable position-relative" a="{'class': 'stretched-link'}">
   <a href="?sort=-first_name">First name</a>
</th>

解决方案 #

方法1：自定义Column类重写表头渲染（推荐） #

创建自定义列类，手动渲染表头的<a>标签并添加stretched-link类：

from django_tables2 import Column

class StretchedLinkColumn(Column):
    def render_header(self, bound_column):
        # 获取排序链接
        url = bound_column.orderable_url()
        if url:
            return f'<a href="{url}" class="stretched-link">{bound_column.header}</a>'
        # 非可排序列直接返回表头文字
        return bound_column.header

在表格类中使用该自定义列：

class YourTable(tables.Table):
    first_name = StretchedLinkColumn()
    # 其他列按需替换为StretchedLinkColumn...

    class Meta:
        attrs = {
            "class": "table table-striped table-sm",
            "th": {"class": "col-md-2 position-relative"},
            "td": {"class": "col-md-2 position-relative"},
        }

方法2：覆盖django-tables2表头模板 #

复制django-tables2的默认表头模板（路径通常为django_tables2/templates/django_tables2/table.html），修改其中的表头链接部分，为<a>标签添加stretched-link类：

{% if column.orderable %}
    <a href="{{ column.orderable_url }}" class="stretched-link">
        {{ column.header }}
        {% if column.sortable %}
            {% if column.is_ordered %}
                {% if column.order_by == 'asc' %}
                    <span>&uarr;</span>
                {% else %}
                    <span>&darr;</span>
                {% endif %}
            {% endif %}
        {% endif %}
    </a>
{% else %}
    {{ column.header }}
{% endif %}

渲染表格时指定自定义模板：

{% render_table table "path/to/your_custom_table_template.html" %}

方法3：JavaScript批量添加类（快速临时方案） #

如果不想修改后端代码，可通过JS给所有表头的<a>标签批量添加类：

document.querySelectorAll('table th a').forEach(link => {
    link.classList.add('stretched-link');
});

注意事项 #

• 确保<th>元素已设置position-relative类（你已在Meta attrs中配置），因为Bootstrap的stretched-link依赖父元素为相对定位才能实现整格覆盖。

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