jQuery dataTables - left align sort icon

css, datatables, html, jquery

Solution

No, that is not possible to appear right after the text, since the arrows in fact are background images in CSS classes attached dynamically to the `<th>`'s. But you can change the position from far right to left :

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 - how to place arrow icons directly after text.

Gave it some extra thoughts - with a little "hack" it is indeed possible. The trick is to disable the `<th>` backgrounds and continuously inject / remove `<span>`'s with the original dataTables backgrounds instead.

CSS (besides disabling the original) :

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

script :

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

update the arrow icons :

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

Now it looks like what we wanted! :

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

Problem

as you can see the sort icons on my Datatable are on the far right of the column: Is it possible to align these on the left so they appear just after the text? ie. ``` # ^ Technician ^ Completed Date ^ ``` Thank you Code as requested: ``` <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> ``` And: ``` $('#table-d').DataTable( { "processing": true, "serverSide": true, "ajax": "{{ path('table_data') }}", "pageLength": 10 })' ```

Original source