Django表格2-在列标题中显示排序指示器箭头 [英] Django tables2 - Displaying sort indicator arrows in column headers

问题描述

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

I've just started using django-tables2 for a project of mine. It's all working fine except for one thing that I've been stuck on -> getting an arrow image to show up in the column headers indicating which way the table is sorted (if it's sorted by that column at the moment).

我只是使用无聊的默认{％render_table table％}来渲染表，所以我没有直接访问它吐出的HTML的权限，并且我真的不想重写整个内容只是添加箭头.

I'm just using the boring default {% render_table table %} to render the table, so I don't have direct access to the HTML that it spits out, and I don't really want to rewrite the whole thing just to add in the arrows.

我已经尝试通过CSS将它们添加进去，但我已经很接近使其能够正常工作了，但是还不能完全到达我想要的位置.我已将其添加到样式表中:

I've tried adding them in via CSS, and I've gotten really close to getting it to work, but can't quite get to where I wanna be. I've added this to my stylesheet:

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标签之外，并且背景图像根本不会显示.

It displays the arrows at the right headers and in the right directions, but the arrows are way off to the right of the column header, much farther than the text. Since the column headers names are of variable length, I have no way of knowing what to set the 0.4 value for each different column header. And I can't set it to the left of the text, because that would be outside the th tag, and the background image doesn't show up at all.

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

Is there an easy way to add custom HTML to the appropriate column header? Or am I stuck editing the table.html that tables2 uses to generate its tables?

推荐答案

您可以阅读以下内容: http://www.datatables.net/blog/Twitter_Bootstrap_2

You could read this: http://www.datatables.net/blog/Twitter_Bootstrap_2

实际上，以上文章中的CSS必须减少到3行才能使用django_tables2:

Actually the CSS from the post above have to be reduced down to 3 lines to work with 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; }

这篇关于Django表格2-在列标题中显示排序指示器箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！