Sortierbild auf der linken Seite des DataTable-Headers setzen

Question

Ich verwende DataTable in meinem Code. Das Sortieren von Bildern im Kopf der Tabelle erfolgt dabei auf der rechten Seite der Kopfzeile und die Beschriftungen befinden sich links. Derselbe Balg:

Ich möchte das austauschen und Header-Labels in richtig setzen. Wie muss ich tun? meine HTML-Tabellencode:

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

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

    ] 
}); 

Answer 1

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

diese

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

ausprobieren, dies hilft Ihnen dank