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

Question

我刚开始用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？还是说我只能编辑tables2用来生成表格的table.html文件呢？

Answer 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; }