CODEWITHSUNDEEP
pythonhtmlcssdjango
numegil
numegil

Reputation: 1926

Django tables2 - Displaying sort indicator arrows in column headers

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).

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.

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

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.

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?

Upvotes: 3

Views: 3165

Answers (1)

iutinvg
iutinvg

Reputation: 4205

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

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

Upvotes: 1

Related Questions