Django tables2 - 在列标题中显示排序指示箭头答案

【问题标题】：Django tables2 - Displaying sort indicator arrows in column headersDjango tables2 - 在列标题中显示排序指示箭头
【发布时间】：2012-01-18 22:59:51
【问题描述】：

我刚刚开始在我的一个项目中使用 django-tables2。一切正常，除了我一直坚持的一件事->在列标题中显示一个箭头图像，指示表格的排序方式（如果它目前按该列排序）。

我只是使用无聊的默认 {% render_table table %} 来渲染表格，所以我无法直接访问它吐出的 HTML，我也不想重写整个东西只是为了添加箭头。

我尝试通过 CSS 将它们添加到其中，并且我已经非常接近让它发挥作用，但无法完全达到我想要的位置。我已将此添加到我的样式表中：

th.asc {
    background: url("arrow-up.gif/") no-repeat scroll right 0.4em transparent;
}

th.desc {
    background: url("arrow-down.gif/") no-repeat scroll right 0.4em transparent;
}

它在正确的标题和正确的方向上显示箭头，但箭头离列标题的右侧很远，比文本更远。由于列标题名称的长度可变，因此我无法知道为每个不同的列标题设置 0.4 值的内容。而且我不能将它设置在文本的左侧，因为那会在 th 标签之外，并且根本不会显示背景图像。

是否有一种简单的方法可以将自定义 HTML 添加到相应的列标题？还是我一直在编辑 table2 用来生成其表的 table.html？

【问题讨论】：

标签： python html css django

【解决方案1】：

您可以阅读：http://www.datatables.net/blog/Twitter_Bootstrap_2

实际上，上面帖子中的 CSS 必须减少到 3 行才能与 django_tables2 一起使用：

table.table thead th.sortable { background: url('../img/sort_both.png') no-repeat center right; }
table.table thead th.asc { background: url('../img/sort_asc.png') no-repeat center right; }
table.table thead th.desc { background: url('../img/sort_desc.png') no-repeat center right; }

【讨论】：