Search code examples
jquerycssdatatables

Remove sorting arrows in jQuery DataTables

I am using the jQuery DataTables plugin.

Is there a way I can get rid of the little arrows they display in the headers to indicate sorting options ? I would like to keep the functionality that by click on a header it sorts by this column, I just dont want to display the arrow icons as they change the layout of my column headers.

Firebug shows my headers as follows:

<th class="sorting" role="columnheader" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" style="width: 151px;" aria-label="Category: activate to sort column ascending">Category</th>
Solution

  • The icons is defined as background : url(..) on the CSS classes. Disable them by :

    .sorting, .sorting_asc, .sorting_desc {
    background : none;
}

    see jsfiddle -> http://jsfiddle.net/5V2Dx/ Note : This solution is for datatables 1.9.x!!

    Update. When using datatables 1.10.x, the CSS for resetting the header icons is a little bit different :

    table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background : none;
}

    see -> http://jsfiddle.net/kqpv3ub9/ (updated demo is using dataTables 1.10.11)