Reputation: 11377

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>

Upvotes: 50

Answers (28)

James McCormack

Reputation: 9934

Most of the answers here are for DataTables v1.*.

For DataTables v2.*, the class names have changed. This is the CSS override I now use to:

Hide the sort controls on columns that are currently unsorted
Show the sort controls when a sortable column header is hovered
Show the sort controls on the active sorted column

table.dataTable thead .dt-column-order {
    visibility: hidden;
}
table.dataTable thead .dt-orderable-asc:hover .dt-column-order,
table.dataTable thead .dt-ordering-asc .dt-column-order, 
table.dataTable thead .dt-ordering-desc .dt-column-order {
    visibility: visible;
}

Upvotes: 0

devon

Reputation: 59

Go to dataTables.boostrap.min.css or dataTables.bootstrap.css, search for content:"↑" and remove the arrow and that will work.

Upvotes: 0

Tunneller

Reputation: 589

I found that I needed to include the "important" qualifier

   <style>
        table.dataTable thead .sorting, 
        table.dataTable thead .sorting_asc, 
        table.dataTable thead .sorting_desc { background : none !important};
    </style>

and make sure that this comes after all of the other .css files.

Upvotes: 0

BeNice

Reputation: 2295

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 a click trigger?

Upvotes: 5

Hesham Yassin

Reputation: 4431

The next code worked for me:

For the asc arrow, I used the next css:

   table.dataTable thead .sorting_asc {
      background-image: none;
   }

To find it is easy: Use the chrome debugger to find the column and start disabling the related styles. Then you will find the related CSS.

Use the same approach to disable the desc arrow.

Peace!

Upvotes: 0

fp007

Reputation: 480

One way I did not see on the previous answers and I believe is the best way to do it is using jQuery DataTable. This way you have more control over the events of the table and how to interact with it.

$('.tableclass').dataTable({
  "order":[[0,"desc"],[1,"asc"]], //Enable ordering by first column then second
  "aoColumnDefs": [
    { "bSortable": false, "aTargets": [ "_all" ] } //disable ordering events and takeout the icon
   ]
 });

Of course the CSS option still a valid one.

Upvotes: 1

Renato Gama

Reputation: 16519

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"

Upvotes: 54

Rbbn

Reputation: 725

<style>
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    display: none;
}
</style>

Works on my machine with DT 2.2.3

Upvotes: 2

Dastin

Reputation: 4507

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

Then add this into a header of your table:

<th class="no-sort">Heading</th>

Anyway here is long answer, you can use this piece of code to disable sort function of the particular column (base-idx: 0), AS WELL AS remove a sort button:

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

But this won't work perfectly if you set orderable as false in the first column. The sort function will stop but the button is still there. Because, by default, the first column was set to order ascendingly ('order': [[ 0, 'asc' ]). To disable this 'annoying' default, add one more option: "order":

$('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ],
      "order": [],  // not set any order rule for any column.
});

Upvotes: 12

Ankita_Shrivastava

Reputation: 1235

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

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

Upvotes: 35

Tahir Alvi

Reputation: 994

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+

Upvotes: 0

Sam YC

Reputation: 11617

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

DataTables-1.10.16\images

Upvotes: 0

Logan Hoerth

Reputation: 151

(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

Upvotes: 15

Clinton Agburum

Reputation: 29

Add this style to your page

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

Upvotes: 0

Nicky Thomas

Reputation: 165

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

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

Hides the filters.

Regards

Upvotes: 2

ruchit

Reputation: 230

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

Upvotes: 0

Sagar Mali

Reputation: 54

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

Upvotes: 0

user2310848

Reputation: 21

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

Upvotes: 0

Shahid Chaudhary

Reputation: 948

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

Upvotes: 0

Bakly

Reputation: 650

This is what worked for me

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

Upvotes: 2

KBIIX

Reputation: 911

In my case this worked fine.

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

Upvotes: 0

davidkonrad

Reputation: 85518

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)

Upvotes: 51

ScottLenart

Reputation: 1210

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

Upvotes: 0

Edgar Couto

Reputation: 61

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

Upvotes: 6

Cristian A. Rodríguez Enríquez

Reputation: 107

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.

Upvotes: 0

Irshad Khan

Reputation: 6026

For new version of DataTables:

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

Upvotes: 9

aseesh

Reputation: 11

Example:

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

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

Upvotes: 1

A. Wolff

Reputation: 74420

Using CSS:

.DataTables_sort_icon { display:none;}

Upvotes: 2

Remove sorting arrows in jQuery DataTables

Answers (28)

Related Questions