如何将 jQuery Datatables 标题排序图标强制到单元格的最右侧或最左侧？

Question

默认情况下，列标题上的数据表排序图标显示在列标题文本下方。我想让它出现在同一行以及标题单元格的最右侧或最左侧。

以下是其中一个列标题的 HTML 显示方式（在 Firebug 中）。

<th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;">
    <div class="DataTables_sort_wrapper" style="text-align: left;">
        Account Name
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </div>
</th>

我在<span> 的css-right 类中添加了display: inline-block;，以强制它出现在与here 和here 相同的行上。但是，我仍然找不到如何强制图标出现在最右边或最左边。添加float:left; 或float:right; 会使图标跳到下一行。

有什么想法吗？

Answer 1

对我来说table.display 不存在，我添加了以下内容：

table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
}

以上对我有用。

Answer 2

虽然 Greg 的回答让我找到了解决方案（并且是我接受的答案），但为了清楚起见，并作为对可能遇到此问题的其他人的帮助，我添加了自己的答案。

对排序图标的定位影响最大的是这个默认的 DataTables CSS：

table.display thead th div.DataTables_sort_wrapper {
    padding-right: 20px;
    position: relative;
}

table.display thead th div.DataTables_sort_wrapper span {
    margin-top: -8px;
    position: absolute;
    right: 0;
    top: 50%;
}

如果class="display"属性不在表格中，则不应用上面的CSS。

Answer 3

我不知道这是否是最好的方法，但这是我在我的 jQuery-UI 数据表中看到的那个符号：

来自站点的主样式表（不是 jQuery UI 样式表的一部分）：

.display thead th .DataTables_sort_wrapper span { float: right; }

来自 jQuery UI CSS 文件：

.ui-icon { 
  display: block; 
  // ... some other stuff including overflow: hidden 
}

当然还有其他一些风格，但我认为这些才是最重要的。根据您的问题，我很惊讶它还没有为您工作。

Answer 4

问题在于，Datatables [经常] 将排序按钮放在文本下方。

OP 特别想要文本右侧或左侧的按钮； 但是，http://britseyeview.com/ 的 Steve Teale 有一个解决方案，可以将排序按钮向上移动到文本上方和单元格的右上角。意思是，排序按钮总是在右上角，但有时在文本上方。基本上他重置了原来的 CSS。

Steve 写道：如果我使用实现这些 [排序按钮] 的开箱即用背景样式，它们会出现在列名后面，所以我改用了：

.sorting_asc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc.png') no-repeat top right;
}

.sorting_desc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc.png') no-repeat top right;
}

.sorting {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_both.png') no-repeat top right;
}

.sorting_asc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc_disabled.png') no-repeat top right;
}

.sorting_desc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc_disabled.png') no-repeat top right;
}

您需要将您的路径添加到“background: url('/your/path/sort_both.png')”。

Steve 的“数据表入门”在这里： http://britseyeview.com/software/dtgs/

Answer 5

适用于最新版本的数据表（截至 15 年 3 月 31 日）。 在数据表 CSS 中更改以下内容-

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {

    cursor: pointer;
    *cursor: hand;
    background-position: left center;
    padding-left: 20px;
}

table.table thead .sorting { background: url('../img/sort_both.png') no-repeat center left; }
table.table thead .sorting_asc { background: url('../img/sort_asc.png') no-repeat center left; }
table.table thead .sorting_desc { background: url('../img/sort_desc.png') no-repeat center left; }

Answer 6

作为上述答案的替代方案，我使用了以下内容（基于早期的见解）。 对我来说好处是右侧没有添加额外的填充，这对于没有排序图标的列很有帮助。 （DataTables 仍然分配 DataTable_sort_wrapper 类）。

table.dataTable th>div.DataTables_sort_wrapper {
  position: relative;
  white-space: nowrap;
}
table.dataTable th > div.DataTables_sort_wrapper > span.DataTables_sort_icon.css_right {
  display: inline-block;
  position: absolute;
  right: 0px;
  vertical-align: top;
}

Answer 7

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-position: left center !important;
    background-repeat: no-repeat;
}