Question

您可以看到我的数据表上的排序图标位于该列的最右侧：

enter image description here

是否可以在左侧对齐它们，使它们出现在文本之后？

即。

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

不，这不可能出现在文本之后，因为箭头实际上是动态附加到<th>的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;
}

enter image description here

演示 - ＆gt;的 http://jsfiddle.net/ttcz5odt/

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

给了一些额外的想法 - 一点点＆＃34; hack＆＃34;这确实是可能的。诀窍是禁用<th>背景，并使用原始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 = '   ', spanAsc = '   ', spanDesc = '   '; $("#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();

现在它看起来像我们想要的！：

演示 - ＆gt;的 http://jsfiddle.net/dmn4q141/

Answer 3

您可以将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;
}

以下是css for make arrow和heading更具吸引力。（不是必需的）

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

Answer 4

the DataTables forum上发布了一个非常好的解决方案。

Answer 5

这是一个简单的答案。

我的屏幕160px就足够了。

根据需要进行调整。

 #table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after 
 {
        left: 160px;
        right: 0;
  }

jQuery dataTables - 左对齐排序图标

5 个答案: