将排序图像放在DataTable标头的左侧

时间:2017-01-19 12:45:32

标签: jquery html css datatables

我在代码中使用DataTable。在此,在表头中排序图像位于标题的右侧,标签位于左侧。同样的轰鸣声: enter image description here

我想交换它并将标题标签放在右边。我该怎么办? 我的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
        },

    ]
});

2 个答案:

答案 0 :(得分:1)

试试这个

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

这有助于你感谢

答案 1 :(得分: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;
}