jQuery DataTables - lewy align ikona sortowania

Question

jak widać ikony sortowania na moim DataTable są na prawej kolumnie:

to możliwe, aby wyrównać te po lewej, więc pojawiają tuż po tekście?

tj.

#^   Technician^   Completed Date^

Dziękuję

kod na żądanie:

<div class="dataTable_wrapper"> 
     <table class="table table-striped table-hover" id="table-d"> 
      <thead> 
      <tr> 
       <th>{% trans %} id {% endtrans %}</th> 
       <th>{% trans %} technician {% endtrans %}</th> 
       <th>{% trans %} date {% endtrans %}</th> 
       <th>{% trans %} summary {% endtrans %}</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 

I:

$('#table-d').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": "{{ path('table_data') }}", 
    "pageLength": 10 
})' 

Answer 1

Nie, to nie jest możliwe, aby pojawić się tuż po tekście, ponieważ strzałkami są to obrazy tła w klasach CSS dołączanych dynamicznie do <th>. Ale można zmienić pozycję od prawej do lewej:

table.dataTable thead .sorting_asc { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left; 
} 
table.dataTable thead .sorting_desc { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left; 
} 
table.dataTable thead .sorting { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left; 
} 

demo ->http://jsfiddle.net/ttcz5odt/

---

Update - jak umieścić ikony strzałek bezpośrednio po tekście.

Dałem jej kilka dodatkowych myśli - z niewielkim "hack" jest to rzeczywiście możliwe. Sztuką jest wyłączenie środowisk <th> i ciągłe wstrzykiwanie/usuwanie <span> z oryginalnymi tła tabelami danych.

CSS (oprócz wyłączenia oryginalna):

span.arrow-hack { 
    margin-left: 5px; 
} 
span.asc { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right; 
} 
span.desc { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right; 
} 
span.sort { 
    background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right; 
} 

Scenariusz:

var spanSorting = '<span class="arrow-hack sort">&nbsp;&nbsp;&nbsp;</span>', 
    spanAsc = '<span class="arrow-hack asc">&nbsp;&nbsp;&nbsp;</span>', 
    spanDesc = '<span class="arrow-hack desc">&nbsp;&nbsp;&nbsp;</span>'; 

$("#example").on('click', 'th', function() { 
    $("#example thead th").each(function(i, th) { 
     $(th).find('.arrow-hack').remove(); 
     var html = $(th).html(), 
      cls = $(th).attr('class'); 
     switch (cls) { 
      case 'sorting_asc' : 
       $(th).html(html+spanAsc); break; 
      case 'sorting_desc' : 
       $(th).html(html+spanDesc); break; 
      default : 
       $(th).html(html+spanSorting); break; 
     } 
    });  
});  

zmiana ikony strzałek:

$("#example th").first().click().click(); 

Teraz wygląda na to, co chcieliśmy! :

demo ->http://jsfiddle.net/dmn4q141/

Answer 2

udało mi się to zrobić, stosując następujące style (lepiej jeśli stosowana jako ostatni css zawierać definicję plik)

/** 
* Datatables Sorting icons on left 
*/ 

table.dataTable thead > tr > th { 
    padding-left: 30px !important; 
    padding-right: initial !important; 
} 

table.dataTable thead .sorting:after, 
table.dataTable thead .sorting_asc:after, 
table.dataTable thead .sorting_desc:after { 
    left: 8px !important; 
    right: auto !important; 
} 

Answer 3

można zmienić css jako:

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{ 
    background-position: left center; 
} 

to css, aby strzałka i nagłówek były bardziej atrakcyjne.(niewymagane)

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{ 
    background-position: 5px center; 
} 
table.dataTable thead th, table.dataTable thead td { 
    padding: 10px 18px 10px 28px;   
} 

Answer 4

Oto rodzaj i prosta odpowiedź.

na moim ekranie wystarczy 160 pikseli.

Dostosuj to do swoich potrzeb.

#table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after 
{ 
     left: 160px; 
     right: 0; 
    } 

Answer 5

Jest to bardzo miłe rozwiązanie zamieszczone na the DataTables forum.