CODEWITHSUNDEEP
htmljquerycssdatatables
b85411
b85411

Reputation: 10010

jQuery dataTables - left align sort icon

as you can see the sort icons on my Datatable are on the far right of the column:

enter image description here

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

Upvotes: 28

Views: 31412

Answers (7)

VDWWD
VDWWD

Reputation: 35544

For DataTables version 2 and up it seems that the class names have changed. The below css works to place the arrows to the right.

.dataTable .dt-column-order {
    //this is what places the arrows to the left
    left: 0px;
}

.dataTable .dt-orderable-asc {
    //padding left is now needed otherwise the header text will be on top of the arrows
    padding-left: 25px;

    //overrides the padding in the datatable css that makes sure the arrows fit on the left
    padding-right: 0px !important;
}

Upvotes: 0

Ben
Ben

Reputation: 2033

Another possible solution is to move the background image:

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
    background-position: 0px !important;
}

Upvotes: 0

jake stayman
jake stayman

Reputation: 1818

There is a very nice solution posted on the DataTables forum.

Upvotes: 1

Bharat
Bharat

Reputation: 6095

Here is the sort and simple answer.

for my screen 160px left is enough.

Adjust it as per your need.

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

Upvotes: 0

Dens
Dens

Reputation: 469

You can change css as:

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

following is css for make arrow and heading more attractive.(not required)

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

Upvotes: 2

Gabriel
Gabriel

Reputation: 809

I have managed to do this by applying the following styles (better if applied as last css include file definition) 

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

Upvotes: 28

davidkonrad
davidkonrad

Reputation: 85548

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

enter image description here

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! : enter image description here

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

Upvotes: 27

Related Questions