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>

Answers


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)


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

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

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


You can use the datatable properties like below, it will hide the sorting icon from datatable columns :

"targets": 'no-sort',
"bSort": false,
"order": []

For new version of DataTables:

<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>

The arrows have certain classes associated with them. You can use the following CSS to hide those elements.

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

Quick trick (this will hide a sort button, but function still works): - Create CSS:

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

Using CSS:

.DataTables_sort_icon { display:none;}

This is what worked for me

.dataTable > thead > tr > th[class*=sort]:after{
    display:none;
}

(Since DataTables 1.10) If you don't need it, disabling ordering is one way to prevent the arrow controls from appearing. Do this on table initialization by specifying the "ordering" option as false.

Example:

$("#example").DataTable({
   "ordering": false
});

JSFiddle

Documentation:

Enable or disable ordering of columns - it is as simple as that!

Caveat: no sorting at all.

Another alternative is to disable ordering across all columns. Then you can set ordering programmatically with the control arrow(s) only displaying on sorted column(s):

var after = $('#after').DataTable({
  "order": [[1,"asc"]],                       // sorting 2nd column
  "columnDefs": [
    { "orderable": false, "targets": "_all" } // Applies the option to all columns
  ]
});

JSFiddle


Example:

<display:column property="......" title="......" sortable="true"/>

This will make the column sortable without displaying the arrow's.


This all seems a bit complicated why not use the data-sortable="false" attribute on the <th> tag and then just do a removeAttribute("class"); in JS with an click trigger?


On the latest version of datatables / CDN it is again different

table.dataTable thead .sorting:after
{
    display: none;
}

Hides the filters.

Regards


For DataTables 1.10.7 a little variant for davidkonrad css style:

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

Include the "th" element.


This will let you change out the default sorting icons for custom icons, which I derived from Irshad's post above and Suschil's post from here. Had to do this due to browsers with font rendering disabled, which was out of our control.

.dataTable > thead > tr > th[class*="sort"]::after{display: none}

table.dataTable thead .sorting { background: url('/Content/images/sort-both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort-asc-list.png') no-repeat center right; }
table.tabledataTable thead .sorting_desc { background: url('/Content/images/sort-desc-list.png') no-repeat center right; }

In my case this worked fine.

.sorting:after,
.sorting_asc:after,
.sorting_desc:after{
    content: "";
    background: none !important;
}

This worked for me.

 #sample_1>thead>tr>th.sorting, #sample_1>thead>tr>th.sorting_asc, #sample_1>thead>tr>th.sorting_desc {
        background : none;

    }
    #sample_1>thead>tr>th.sorting:after, #sample_1>thead>tr>th.sorting_asc:after, #sample_1>thead>tr>th.sorting_desc::after {
        content: none; 
    }

CSS classes sorting_asc and sorting_desc brings the icon.

Easiest solution to localize fix for specific table is, once table is initialized, in fnInitComplete, do the following:

$(TABLE).find("thead th").removeClass("sorting_asc");


$('#sample_1 thead tr th:first-child').removeClass('sorting');

Put below CSS. It will hide the icon only, however sorting will work.

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-image: none!important;
}

Add this style to your page

table.dataTable thead .sorting::after {
    opacity: 0.2;
    content: "";
}

You actually can remove the icon images as well (instead of adding new CSS), in folder:

DataTables-1.10.16\images


There is an other solution to hide the sorting icons from a column, Apply a css class to the header let say,

<th class="sorting_disabled"></th>

and define the css class in style

.sorting_disabled
{
   background-image:none !important;
}

This solution worked and tested for jquery datatable version 1.10+


Need Your Help

How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?

javascript browser firebug

Within JSP files, I have some pretty complicated Javascript. On a production machine, we're seeing a very weird bug that we have not been able to understand. We have never been able to replicate ...

Address validation using Google Maps API

api geolocation street-address postal-code

I have a task to validate addresses entered into a system I am currently creating. The system requires that address entered are validated against a valid data source. In the UK the dataset comes fr...