jQuery dataTables - 左对齐排序图标

Posted 2023-05-07

【中文标题】jQuery dataTables - 左对齐排序图标

【英文标题】：jQuery dataTables - left align sort icon

【发布时间】：2015-04-18 23:50:39

【问题描述】：

如您所见，我的数据表上的排序图标位于列的最右侧：

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

即。

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

【问题讨论】：

你能贴出你的代码吗？

【参考方案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;

【讨论】：

也致力于 Bootsrap 样式。

完美，谢谢！ :)) 我刚刚将这一行添加到： - 在左侧添加一些填充（因此文本不会与图标重叠） - 删除右侧的填充（这会使小列变大）table.dataTable thead td.sorting, table.dataTable thead td.sorting_asc, table.dataTable thead td.sorting_desc padding-left: 25px; padding-right: 0px !important; 跨度>

【参考方案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;

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

---

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

给它一些额外的想法 - 稍微“破解”它确实是可能的。诀窍是禁用<th> 背景并使用原始数据表背景不断注入/删除<span>。

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/

【讨论】：

在这么长时间之后只为回答而投票！可惜知道这是不可能的；但几个月前我开始接受它。

太棒了！对于那些在 WordPress 中使用“表格排序器”插件的人，您必须覆盖此样式块：table.tablesorter thead tr th。添加到它：background-position: left center !important;

【参考方案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。（非必需）

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;           

【讨论】：

不适合我，可能是因为我使用 bootsrap 样式。

【参考方案4】：

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

【参考方案5】：

这里是排序和简单的答案。

对于我的屏幕来说，剩下 160 像素就足够了。

根据您的需要进行调整。

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