jQuery dataTables - 左对齐排序图标

Question

正如您所看到的,我的数据表上的排序图标位于该列的最右侧:

是否可以将它们对齐在左侧,以便它们出现在文本之后？

即.

# ^            Technician ^              Completed Date ^

谢谢

所要求的代码:

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

和:

$('#table-d').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "{{ path('table_data') }}",
    "pageLength": 10
})'

Answer 1

我设法通过应用以下样式来做到这一点(如果应用为最后的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;
}

Answer 2

不,这不可能出现在文本之后,因为箭头实际上是动态附加到CSS的CSS类中的背景图像<th>.但是你可以从最右边到左边改变位置:

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

演示 - > http://jsfiddle.net/ttcz5odt/

更新 - 如何在文本后直接放置箭头图标.

给它一些额外的想法 - 有点"黑客"它确实是可能的.诀窍是禁用<th>背景并<span>使用原始dataTables背景连续注入/删除.

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

脚本:

var spanSorting = '<span class="arrow-hack sort">&nbsp;&nbsp;&nbsp;</span>',
    spanAsc = '<span class="arrow-hack asc">&nbsp;&nbsp;&nbsp;</span>',
    spanDesc = '<span class="arrow-hack desc">&nbsp;&nbsp;&nbsp;</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;
        }
    });     
});    

更新箭头图标:

$("#example th").first().click().click();

现在它看起来像我们想要的!:

演示 - > http://jsfiddle.net/dmn4q141/