Remove sorting arrows in jQuery DataTables

Question

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> 

Answer 1

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)

Answer 2

None of the presented solutions worked for me. But I have just found this one;

.dataTable > thead > tr > th[class*="sort"]:before, .dataTable > thead > tr > th[class*="sort"]:after {     content: "" !important; } 

PS.: DataTables version "datatables": "~1.10.2"