如何将jQuery Datatables标题排序图标强制到单元格的最右侧或最左侧？
默认情况下，列标题上的数据表排序图标显示在列标题文本下方。 我希望它出现在标题单元格的同一行和最右侧或最左侧。
以下是其中一个列标题的HTML显示方式（在Firebug中）。
Account Name 我添加了display: inline-block; 到上的css-right类强制它出现在这里和这里提到的同一行。 但是，我仍然无法找到如何强制图标出现在最右边或最左边。 添加float:left; 或float:right; 将图标碰到下一行。
有任何想法吗？
我不知道这是不是最好的方法，但这是我在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 }
当然还有其他一些风格，但我认为那些是重要的。 基于你的问题，我很惊讶它还没有为你工作。
对我来说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; }
以上对我有用。
虽然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。
问题是，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/
对于最新版本的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; }
作为上述答案的替代方案，我使用了以下内容（基于之前的见解）。 对我来说，好处是没有在右侧添加额外的填充，这对没有排序图标的列很有帮助。 （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; }
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; }