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

How can I force the jQuery Datatables header sort icon to the far right or far left of the cell?

提问by Matt K

The Datatables sort icon, on column headers, by default appears under the column header text. I'd like to have this appear on the same line and on the far right side or far left side of the header cell.

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

Here's how the HTML for one of the column headers appears (in Firebug).

下面是列标题之一的 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>

I added display: inline-block;to the css-rightclass on the <span>to force it to appear on the same line as mentioned hereand here. However, I still can't find how to force the icon to appear on the far right or the far left. Adding float:left;or float:right;bumps the icon to the next line.

我添加display: inline-block;到css-right类中<span>以强制它出现在此处和此处提到的同一行上。但是，我仍然找不到如何强制图标出现在最右侧或最左侧。将图标添加float:left;或float:right;碰撞到下一行。

Any ideas?

有任何想法吗？

采纳答案by Greg Pettit

I don't know if this is the best way, but here's what I see in my jQuery-UI DataTable for that symbol:

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

From the site's main stylesheet (not part of the jQuery UI stylesheet):

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

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

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

From the jQuery UI CSS file:

来自 jQuery UI CSS 文件：

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

There are some other styles of course, but I think those are the ones that matter. Based on your question, I'm surprised it's not already working for you.

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

回答by Manny

For me table.displaydid not exist, I added the following:

对我来说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;
}

The above worked for me.

以上对我有用。

回答by Matt K

Though Greg's answer lead me to the solution (and is the answer I accepted), for clarity, and as a help to others that might run into this issue, I'm adding my own answer.

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

What most affects the positioning of the sort icons is this default DataTables CSS:

对排序图标定位影响最大的是这个默认的 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%;
}

If the class="display"attribute is not on the table, the CSS above is not applied.

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

回答by UnlimitedInfinity

The problem being, Datatables [often] places the sort button under the text.

问题是，数据表 [经常] 将排序按钮放在文本下方。

The OP specifically wanted the button on the right or the left of the text; however, Steve Teale of http://britseyeview.com/has a solution which moves the sort buttons up above the text and to the top-right of the cell. Meaning, the sort button is always top-right, but sometimes over the text. Basically he resets the original CSS.

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

Steve writes: If I use the out-of-box background styles that implement these [sort buttons], they appear behind the column name, so instead I used:

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;
}

You will need to add your path to the "background: url('/your/path/sort_both.png')".

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

Steve's "Getting Started with Datatables" is here: http://britseyeview.com/software/dtgs/

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

回答by sushil kumar

For the latest version of Datatables(as of 31 march 15). inside the datatables CSS change the following-

对于最新版本的数据表（截至 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; }

回答by pete

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;
}

回答by wbdarby

As an alternative to the answers above, I used the following (based on the earlier insight). The benefit for me is that no additional padding is added on the right, which is helpful for columns that do not have a sort icon. (DataTables still assigns the DataTable_sort_wrapper class).

作为上述答案的替代方案，我使用了以下内容（基于之前的见解）。对我来说的好处是没有在右侧添加额外的填充，这对没有排序图标的列很有帮助。（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;
}