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>

我将display: inline-block;添加到css-right上的<span>班级，以强制它显示在提及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

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

对排序图标的定位影响最大的是这个默认的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 DataTable中看到的那个符号：

从网站的主样式表（不是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。

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

.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'）”。

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

Answer 5

最新版本的Datatables（截至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;
}

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

7 个答案: