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

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屋！