Как заставить значок сортировки заголовка jQuery Datatables находиться справа или слева от ячейки?

Question

Значок сортировки Datatables в заголовках столбцов по умолчанию отображается под текстом заголовка столбца.Я хотел бы, чтобы это отображалось в той же строке и в крайней правой или левой части ячейки заголовка.

Вот как отображается HTML для одного из заголовков столбцов (в Firebug).

<th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;">
    <div class="DataTables_sort_wrapper" style="text-align: left;">
        Account Name
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </div>
</th>

Я добавил display: inline-block; к классу css-right на <span>, чтобы заставить его появляться в той же строке, что и упомянутые здесь и здесь ,Тем не менее, я все еще не могу найти, как заставить значок появляться в крайнем правом или крайнем левом углу.Добавление float:left; или float:right; увеличивает значок на следующую строку.

Есть идеи?

Answer 1

Для меня table.display не существовало, я добавил следующее:

table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
}

Вышеупомянутое сработало для меня.

Answer 2

Хотя ответ Грега привел меня к решению (и это ответ, который я принял), для ясности и как помощь другим, которые могут столкнуться с этой проблемой, я добавляю свой собственный ответ.

Что больше всего влияет на расположение значков сортировки, так это CSS DataTables по умолчанию:

table.display thead th div.DataTables_sort_wrapper {
    padding-right: 20px;
    position: relative;
}

table.display thead th div.DataTables_sort_wrapper span {
    margin-top: -8px;
    position: absolute;
    right: 0;
    top: 50%;
}

Если атрибут class="display" отсутствует в таблице, указанный выше CSS не применяется.

Answer 3

Я не знаю, является ли это лучшим способом, но вот что я вижу в моей таблице данных jQuery-UI для этого символа:

Из основной таблицы стилей сайта (не входит в таблицу стилей пользовательского интерфейса jQuery):

.display thead th .DataTables_sort_wrapper span { float: right; }

Из CSS-файла пользовательского интерфейса jQuery:

.ui-icon { 
  display: block; 
  // ... some other stuff including overflow: hidden 
}

Конечно, есть и другие стили, но я думаю, что это те, которые имеют значение. Исходя из вашего вопроса, я удивлен, что он уже не работает для вас.

Answer 4

Для последней версии Datatables (по состоянию на 31 марта 15). CSS внутри datatables меняет следующее-

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {

    cursor: pointer;
    *cursor: hand;
    background-position: left center;
    padding-left: 20px;
}

table.table thead .sorting { background: url('../img/sort_both.png') no-repeat center left; }
table.table thead .sorting_asc { background: url('../img/sort_asc.png') no-repeat center left; }
table.table thead .sorting_desc { background: url('../img/sort_desc.png') no-repeat center left; }

Answer 5

Проблема в том, что Datatables [часто] размещает кнопку сортировки под текстом.

ОП специально хотела кнопку справа или слева от текста; однако у Стива Тила из http://britseyeview.com/ есть решение, которое перемещает кнопки сортировки вверх над текстом и в верхний правый угол ячейки. Это означает, что кнопка сортировки всегда находится в верхнем правом углу, но иногда над текстом. В основном он сбрасывает оригинальный CSS.

Стив пишет: Если я использую нестандартные стили фона, которые реализуют эти [кнопки сортировки], они появляются за именем столбца, поэтому вместо этого я использовал:

.sorting_asc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc.png') no-repeat top right;
}

.sorting_desc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc.png') no-repeat top right;
}

.sorting {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_both.png') no-repeat top right;
}

.sorting_asc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc_disabled.png') no-repeat top right;
}

.sorting_desc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc_disabled.png') no-repeat top right;
}

Вам нужно будет добавить свой путь к "background: url ('/ your / path / sort_both.png')".

Стив " Начало работы с таблицами данных " находится здесь: http://britseyeview.com/software/dtgs/

Answer 6

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-position: left center !important;
    background-repeat: no-repeat;
}

Answer 7

В качестве альтернативы ответам выше, я использовал следующее (основываясь на более раннем понимании). Для меня преимущество в том, что справа не добавляются дополнительные отступы, что полезно для столбцов, у которых нет значка сортировки. (DataTables по-прежнему назначает класс DataTable_sort_wrapper).

table.dataTable th>div.DataTables_sort_wrapper {
  position: relative;
  white-space: nowrap;
}
table.dataTable th > div.DataTables_sort_wrapper > span.DataTables_sort_icon.css_right {
  display: inline-block;
  position: absolute;
  right: 0px;
  vertical-align: top;
}