HTML & CSS：排序表按钮不起作用

Posted 2023-05-07

【中文标题】HTML & CSS：排序表按钮不起作用

【英文标题】：HTML & CSS: Sorting table buttons not working

【发布时间】：2020-07-08 15:57:59

【问题描述】：

我正在使用 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" >
  <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>

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

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

【讨论】：

谢谢！它实际上比我想要的要好！