CODEWITHSUNDEEP
jqueryhtmlcssdatatables
narges
narges

Reputation: 751

put sorting image in left side of DataTable header

I use DataTable in my code. in this, sorting images in header of table are in right side of header and labels are in left. same bellow: enter image description here

I want to exchange that and put header labels in right. How must i do? my html table code:

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

and java script code:

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

    ]
});

Upvotes: 0

Views: 993

Answers (2)

z.gomar
z.gomar

Reputation: 370

use this css :

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

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

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

Upvotes: 1

code.rider
code.rider

Reputation: 1907

try this out

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

this helps you thanks

Upvotes: 1

Related Questions