HTML & CSS: кнопки сортировки таблицы не работают

Question

Я использую datatable. js и пытаюсь сделать мой стол сортируемым. Сортировка работает, но я не могу понять, почему моя иконка не появляется.

Результаты:

Ожидается:

Мой код:

table.users thead .sorting:before, table.users thead .sorting_asc:before, table.users thead .sorting_asc_disabled:before, table.users thead .sorting_desc:before, table.users thead .sorting_desc_disabled:before {
  top: 2px;
  right: 1em;
  content: "\2191";
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}

table.users thead .sorting:after, table.users thead .sorting:before, table.users thead .sorting_asc:after, table.users thead .sorting_asc:before, table.users thead .sorting_asc_disabled:after, table.users thead .sorting_asc_disabled:before, table.users thead .sorting_desc:after, table.users thead .sorting_desc:before, table.users thead .sorting_desc_disabled:after, table.users thead .sorting_desc_disabled:before {
  position: absolute;
  bottom: .9em;
  display: block;
  opacity: .3;
}

<table id="users" class="table table-hover users" width="100%">
  <thead>
    <tr>
      <th class="sorting">Nickname</th>
       <th>Rank</th>
       <th>SteamID</th>
       <th>Date</th>
       <th>Last Access</th>
      <th class="disabled-sorting text-right">Actions</th>
    </tr>
  </thead>

Answer 1

Следующее выполнить просто, но есть несколько отличий от того, что вы просили.

Таблица:

Стили:

/* hide the default sort order triangles */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none;
}

/* not sorted */
table.dataTable thead .sorting:after {
  padding-left: 1em;
  content: "\2191\2193";
  opacity: .3;
}

/* sorted ascending */
table.dataTable thead .sorting_asc:after {
  padding-left: 1em;
  content: "\2191";
}

/* sorted descending */
table.dataTable thead .sorting_desc:after {
  padding-left: 1em;
  content: "\2193";
}

Примечания:

1) При этом используются имена классов, предоставляемые DataTables - нет пользовательских классов.

2) Стрелки не корректируются вправо в каждой ячейке заголовка. Вместо этого они расположены немного правее от ярлыков. Если заголовки столбцов не имеют четких границ, то это может быть полезно.

3) Для отсортированного столбца отображается только одна стрелка. На скриншоте ожидаются обе стрелки (одна с меньшей непрозрачностью).

Если это не соответствует вашим потребностям, оно может, по крайней мере, указать вам направление, в котором вы хотите go.