HTML &CSS:排序表格按钮不起作用 [英] HTML & CSS: Sorting table buttons not working

问题描述

我正在使用 datatable.js 并且我正在尝试使我的表格可排序.排序有效，但我不明白为什么我的图标没有出现.

I'm using datatable.js and I'm trying to make my table sortable. The sorting works but I can't figure out why my icon doesn't appear.

结果:

预期:

我的代码:

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>

推荐答案

以下内容很容易实现，但与您要求的有一些不同.

The following is straightforward to implement, but there are a couple of differences from what you requested.

表格:

风格:

/* 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: "21912193";
  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 提供的类名 - 没有使用自定义类.

1) This uses the class names provided by DataTables - there are no custom classes used.

2) 箭头未在每个标题单元格内右调整.相反，它们位于标签的右侧.如果您的列标题没有清晰的边框，那么这实际上可能是一件好事.

2) The arrows are not right-adjusted within each heading cell. Instead, they are slightly to the right of the labels. If your column headings do not have clear borders, then this may actually be a good thing.

3) 对于已排序的列，只显示一个箭头.您的屏幕截图需要两个箭头(一个不透明度较低).

3) For a sorted column, only one arrow is shown. Your screenshot expects both arrows (one with less opacity).

如果这不能满足您的需求，它至少可以为您指明前进的方向.

If this doesn't meet your needs, it may at least point you in the direction you want to go.

这篇关于HTML &CSS:排序表格按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！