将排序图像放在数据表标题的左侧

Question

我在我的代码中使用DataTable。在这种情况下，表格标题中的排序图像位于标题右侧，标签位于左侧。同样如下：

我想交换它并将标题标签放在正确的位置。我该怎么办？ 我的html表格代码：

<table  id="example" class="display" cellspacing="0" width="100%">
    <thead >
    <tr>
        <th >عکس</th>

        <th>نام</th>
        <th>نام خانوادگی</th>
        <th>آدرس منزل</th>
        <th>ویرایش</th>
        <th>حذف</th>

    </tr>
    </thead>
</table>

和java脚本代码：

table = $('#example').DataTable({
    select: {
        style: 'multi',
    },

    "aaData": data,
    aaSorting: [[2, 'asc']],
    columns: [
        {
            "width": "3%",
            data: null,
            className: "center",
            "orderable": false,
            defaultContent: '<img class="img-responsive"  src="" />'
        },
        {"width": "27%"},
        {"width": "27%"},
        {"width": "37%"},
        {
            data: null,
            "width": "3%",
            className: "center",
            "orderable": false,
            defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit"><button id="EditStudent" class="btn btn-primary btn-xs" data-title="ویرایش"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>'
        },
        {
            data: null,
            "width": "3%",
            "orderable": false,
            defaultContent: '<p  data-placement="top" data-toggle="tooltip" title="Delete"><button id="DeleteStudent" class="btn btn-danger btn-xs" data-title="Delete"  ><span class="glyphicon glyphicon-trash"></span></button></p>'
        },
        {

            "visible": false,
            "searchable": false
        },

    ]
});

Answer 1

使用这个CSS：

table.dataTable thead .sorting {
    text-align: right;
}

table.dataTable thead .sorting_asc {
    text-align: right;
}

table.dataTable thead .sorting_desc{
    text-align: right;
}

Answer 2

试试这个

table.dataTable thead .sorting::after {
    bottom: 0 !important;
    left: 10px !important; 
    right: 0px !important;
}

这对你有帮助，谢谢