положить сортировку изображения в левой части заголовка DataTable

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 Script код:

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

это помогает вам спасибо