如何强制jQuery Datatables标题排序图标到单元格的最右边或最左边？ [英] How can I force the jQuery Datatables header sort icon to the far right or far left of the cell?

问题描述

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

以下是HTML的其中一个列标题出现（在Firebug中）。

 < th class =ui-state-defaultrowspan =1colspan =1style =width：252px;> 
< div class =DataTables_sort_wrapperstyle =text-align：left;> 
帐号名称
< span class =DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n>< / span> 
< / div> 
< / th> 
  

我添加了 display：inline-block; 到< span> 上的 css-right 类，强制它出现在与上述相同的行上<这里的href =http://datatables.net/forums/discussion/604/themeroller-sort-icons-render-on-separate-line/p1 =noreferrer>和这里。但是，我仍然找不到如何强制图标出现在最右边或最左边。添加 float：left; 或 float：right; 将图标颠倒到下一行。

任何想法？

解决方案

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

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

.display thead .DataTables_sort_wrapper span {float：right;从



$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ code> .ui-icon {
display：block;
// ...一些其他的东西，包括overflow：hidden
}


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

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).

<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-right class on the <span> to force it to appear on the same line as mentioned here and 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.

Any ideas?

解决方案

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

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

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

From the jQuery UI CSS file:

.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.

这篇关于如何强制jQuery Datatables标题排序图标到单元格的最右边或最左边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！