html - 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>

标签： htmlcssdatatables

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) 对于排好序的列，只显示一个箭头。您的屏幕截图需要两个箭头（一个不透明度较低）。

如果这不能满足您的需求，它至少可以为您指明您想要去的方向。