jQuery dataTables - 左对齐排序图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28575810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dataTables - left align sort icon
提问by b85411
as you can see the sort icons on my Datatable are on the far right of the column:
如您所见，我的数据表上的排序图标位于列的最右侧：
Is it possible to align these on the left so they appear just after the text?
是否可以在左侧对齐它们，以便它们出现在文本之后？
ie.
IE。
# ^ Technician ^ Completed Date ^
Thank you
谢谢
Code as requested:
按要求编码：
<div class="dataTable_wrapper">
<table class="table table-striped table-hover" id="table-d">
<thead>
<tr>
<th>{% trans %} id {% endtrans %}</th>
<th>{% trans %} technician {% endtrans %}</th>
<th>{% trans %} date {% endtrans %}</th>
<th>{% trans %} summary {% endtrans %}</th>
</tr>
</thead>
</table>
</div>
And:
和：
$('#table-d').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "{{ path('table_data') }}",
"pageLength": 10
})'
采纳答案by davidkonrad
No, that is not possible to appear right after the text, since the arrows in fact are background images in CSS classes attached dynamically to the <th>'s. But you can change the position from far right to left :
不，这不可能出现在文本之后，因为箭头实际上是动态附加到<th>'s 的CSS 类中的背景图像。但是您可以将位置从最右侧更改为左侧：
table.dataTable thead .sorting_asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
}
table.dataTable thead .sorting_desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
}
table.dataTable thead .sorting {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
}
demo -> http://jsfiddle.net/ttcz5odt/
演示 -> http://jsfiddle.net/ttcz5odt/
Update - how to place arrow icons directly after text.
更新 - 如何在文本后直接放置箭头图标。
Gave it some extra thoughts - with a little "hack" it is indeed possible. The trick is to disable the <th>backgrounds and continuously inject / remove <span>'s with the original dataTables backgrounds instead.
给它一些额外的想法 - 用一点“黑客”确实是可能的。诀窍是禁用<th>背景并<span>使用原始数据表背景连续注入/删除。
CSS (besides disabling the original) :
CSS（除了禁用原始）：
span.arrow-hack {
margin-left: 5px;
}
span.asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right;
}
span.desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right;
}
span.sort {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right;
}
script :
脚本 ：
var spanSorting = '<span class="arrow-hack sort"> </span>',
spanAsc = '<span class="arrow-hack asc"> </span>',
spanDesc = '<span class="arrow-hack desc"> </span>';
$("#example").on('click', 'th', function() {
$("#example thead th").each(function(i, th) {
$(th).find('.arrow-hack').remove();
var html = $(th).html(),
cls = $(th).attr('class');
switch (cls) {
case 'sorting_asc' :
$(th).html(html+spanAsc); break;
case 'sorting_desc' :
$(th).html(html+spanDesc); break;
default :
$(th).html(html+spanSorting); break;
}
});
});
update the arrow icons :
更新箭头图标：
$("#example th").first().click().click();
Now it looks like what we wanted! :
现在它看起来像我们想要的！：
demo -> http://jsfiddle.net/dmn4q141/
回答by Gabriel
I have managed to do this by applying the following styles (better if applied as last css include file definition)
我设法通过应用以下样式来做到这一点（如果作为最后一个 css 包含文件定义应用会更好）
/**
* Datatables Sorting icons on left
*/
table.dataTable thead > tr > th {
padding-left: 30px !important;
padding-right: initial !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
left: 8px !important;
right: auto !important;
}
回答by Dens
You can change css as:
您可以将 css 更改为：
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;
}
following is css for make arrow and heading more attractive.(not required)
以下是使箭头和标题更具吸引力的 css。（不是必需的）
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: 5px center;
}
table.dataTable thead th, table.dataTable thead td {
padding: 10px 18px 10px 28px;
}
回答by jake stayman
There is a very nice solution posted on the DataTables forum.
DataTables 论坛上发布了一个非常好的解决方案。
回答by Bharat
Here is the sort and simple answer.
这是排序和简单的答案。
for my screen 160px left is enough.
对于我的屏幕，左 160 像素就足够了。
Adjust it as per your need.
根据您的需要调整它。
#table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after
{
left: 160px;
right: 0;
}
