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 в соответствующий заголовок столбца? Или я застрял в редактировании table.html, который table2 использует для генерации своих таблиц?

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